@conform-to/react - npm Package Compare versions

Comparing version 1.0.0-pre.4 to 1.0.0-pre.5

context.d.ts

@@ -1,2 +0,2 @@
-import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+import { type Constraint, type ControlButtonProps, type FormId, type FieldName, type FormContext, type FormControl, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
 import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
@@ -7,18 +7,12 @@ export type Pretty<T> = {
 export type Primitive = string | number | boolean | Date | File | null | undefined;
-export type FieldProps<FieldSchema, Error = unknown, FormSchema extends Record<string, unknown> = Record<string, unknown>> = {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<FieldSchema>;
-} | {
-    formId: FieldSchema extends Record<string, unknown> ? FormId<FieldSchema, Error> : never;
-    name?: undefined;
-};
-export type Metadata<Schema, Error> = {
-    key?: string;
+export type Metadata<Schema, FormError, FormSchema extends Record<string, unknown>> = {
+    key: string | undefined;
     id: string;
     errorId: string;
     descriptionId: string;
+    name: FieldName<Schema, FormError, FormSchema>;
     initialValue: FormValue<Schema>;
     value: FormValue<Schema>;
-    errors: Error | undefined;
-    allErrors: Record<string, Error>;
+    errors: FormError | undefined;
+    allErrors: Record<string, FormError>;
     allValid: boolean;
@@ -28,8 +22,10 @@ valid: boolean;
 };
-export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, Error = unknown> = Omit<Metadata<Schema, Error>, 'id'> & {
-    id: FormId<Schema, Error>;
-    context: FormContext<Schema, Error>;
+export type FormMetadata<Schema extends Record<string, unknown> = Record<string, unknown>, FormError = string[]> = Omit<Metadata<Schema, FormError, Schema>, 'id'> & {
+    id: FormId<Schema, FormError>;
+    context: FormContext<Schema, FormError>;
     status?: 'success' | 'error';
+    dispatch(control: FormControl): void;
+    getControlButtonProps(control: FormControl): ControlButtonProps;
     getFieldset: () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error, Schema>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError, Schema>;
     };
@@ -40,14 +36,13 @@ onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
 };
-export type FieldMetadata<Schema = unknown, Error = unknown, FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, Error> & {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<Schema>;
+export type FieldMetadata<Schema = unknown, FormError = string[], FormSchema extends Record<string, any> = Record<string, unknown>> = Metadata<Schema, FormError, FormSchema> & {
+    formId: FormId<FormSchema, FormError>;
     constraint?: Constraint;
     getFieldset: unknown extends Schema ? () => unknown : Schema extends Primitive | Array<any> ? never : () => {
-        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, Error>;
+        [Key in UnionKeyof<Schema>]: FieldMetadata<UnionKeyType<Schema, Key>, FormError>;
     };
-    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, Error>> : never;
+    getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormError>> : never;
 };
-export declare const Registry: import("react").Context<Record<string, FormContext>>;
-export declare function useFormContext<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: FormContext<Schema, Error, Value>): FormContext<Schema, Error, Value>;
-export declare function useFormState<Error>(form: FormContext<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
+export declare const Form: import("react").Context<FormContext[]>;
+export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, FormError, unknown>;
+export declare function useFormState<FormError>(form: FormContext<any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
 export declare function FormProvider(props: {
@@ -58,12 +53,8 @@ context: FormContext<any, any, any>;
 export declare function FormStateInput(props: {
-    formId: string;
-    context?: undefined;
-} | {
-    formId?: undefined;
-    context: FormContext;
+    formId?: string;
 }): React.ReactElement;
 export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
-export declare function getMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema>): Metadata<Schema, Error>;
-export declare function getFieldMetadata<Schema, Error, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, Error, FormSchema>;
-export declare function getFormMetadata<Schema extends Record<string, any>, Error>(formId: FormId<Schema, Error>, state: FormState<Error>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
+export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormError, FormSchema>): Metadata<Schema, FormError, FormSchema>;
+export declare function getFieldMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormError, FormSchema>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, any>, noValidate: boolean): FormMetadata<Schema, FormError>;

context.js

@@ -10,6 +10,6 @@ 'use strict';
 
-var Registry = /*#__PURE__*/react.createContext({});
-function useFormContext(formId, context) {
-  var registry = react.useContext(Registry);
-  var form = context !== null && context !== void 0 ? context : registry[formId];
+var Form = /*#__PURE__*/react.createContext([]);
+function useFormContext(formId) {
+  var contexts = react.useContext(Form);
+  var form = formId ? contexts.find(context => context.formId === formId) : contexts[0];
   if (!form) {
@@ -25,7 +25,7 @@ throw new Error('Form context is not available');
 function FormProvider(props) {
-  var registry = react.useContext(Registry);
-  var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
-    [props.context.formId]: props.context
-  }), [registry, props.context]);
-  return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
+  var forms = react.useContext(Form);
+  var value = react.useMemo(() => [props.context].concat(forms),
+  // Put the latest form context first
+  [forms, props.context]);
+  return /*#__PURE__*/jsxRuntime.jsx(Form.Provider, {
     value: value,
@@ -36,4 +36,3 @@ children: props.children
 function FormStateInput(props) {
-  var _props$formId;
-  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
+  var context = useFormContext(props.formId);
   return /*#__PURE__*/jsxRuntime.jsx("input", {
@@ -70,2 +69,3 @@ type: "hidden",
     id,
+    name,
     errorId: "".concat(id, "-error"),
@@ -146,9 +146,7 @@ descriptionId: "".concat(id, "-description"),
   var metadata = getMetadata(formId, state, subjectRef, name);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
         case 'formId':
           return formId;
-        case 'name':
-          return name;
         case 'constraint':
@@ -169,3 +167,3 @@ return state.constraint[name];
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
@@ -176,4 +174,4 @@ });
   var metadata = getMetadata(formId, state, subjectRef);
-  return new Proxy(metadata, {
-    get(target, key, receiver) {
+  return new Proxy({}, {
+    get(_, key, receiver) {
       switch (key) {
@@ -184,2 +182,5 @@ case 'context':
           return state.submissionStatus;
+        case 'dispatch':
+        case 'getControlButtonProps':
+          return context[key];
         case 'onSubmit':
@@ -196,3 +197,3 @@ return event => {
       }
-      return Reflect.get(target, key, receiver);
+      return Reflect.get(metadata, key, receiver);
     }
@@ -202,5 +203,5 @@ });
 
+exports.Form = Form;
 exports.FormProvider = FormProvider;
 exports.FormStateInput = FormStateInput;
-exports.Registry = Registry;
 exports.getFieldMetadata = getFieldMetadata;
@@ -207,0 +208,0 @@ exports.getFormMetadata = getFormMetadata;

helpers.d.ts

 /// <reference types="react" />
-import { type Intent } from '@conform-to/dom';
 import type { FormMetadata, FieldMetadata, Metadata, Pretty, Primitive } from './context';
@@ -82,3 +81,3 @@ type FormControlProps = {
  */
-export declare function getAriaAttributes<Schema, Error>(metadata: Metadata<Schema, Error>, options?: FormControlOptions): {
+export declare function getAriaAttributes(metadata: Metadata<any, any, any>, options?: FormControlOptions): {
     'aria-invalid'?: boolean;
@@ -96,6 +95,6 @@ 'aria-describedby'?: string;
  */
-export declare function getFormProps<Schema extends Record<string, any>, Error>(metadata: FormMetadata<Schema, Error>, options?: FormControlOptions): {
+export declare function getFormProps<Schema extends Record<string, any>, FormError>(metadata: FormMetadata<Schema, FormError>, options?: FormControlOptions): {
     'aria-invalid'?: boolean | undefined;
     'aria-describedby'?: string | undefined;
-    id: import("@conform-to/dom").FormId<Schema, Error>;
+    id: import("@conform-to/dom").FormId<Schema, FormError>;
     onSubmit: (event: import("react").FormEvent<HTMLFormElement>) => void;
@@ -113,8 +112,8 @@ noValidate: boolean;
  */
-export declare function getFieldsetProps<Schema extends Record<string, any> | undefined | unknown, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): {
+export declare function getFieldsetProps<Schema extends Record<string, any> | undefined | unknown>(metadata: FieldMetadata<Schema, any, any>, options?: FormControlOptions): {
     'aria-invalid'?: boolean | undefined;
     'aria-describedby'?: string | undefined;
     id: string;
-    name: import("@conform-to/dom").FieldName<Schema>;
-    form: import("@conform-to/dom").FormId<any, Error>;
+    name: import("@conform-to/dom").FieldName<Schema, any, any>;
+    form: import("@conform-to/dom").FormId<any, any>;
 };
@@ -125,3 +124,3 @@ /**
  */
-export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): FormControlProps;
+export declare function getFormControlProps<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: FormControlOptions): FormControlProps;
 /**
@@ -217,8 +216,2 @@ * Derives the properties of an input element based on the field metadata,
 }>): Array<InputProps & Pick<Required<InputProps>, 'type' | 'value'>>;
-export declare function getControlButtonProps(formId: string, intent: Intent): {
-    name: string;
-    value: string;
-    form: string;
-    formNoValidate: boolean;
-};
 export {};

helpers.js

@@ -6,3 +6,2 @@ 'use strict';
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 
@@ -221,14 +220,5 @@ /**
 }
-function getControlButtonProps(formId, intent) {
-  return {
-    name: dom.INTENT,
-    value: dom.serializeIntent(intent),
-    form: formId,
-    formNoValidate: true
-  };
-}
 
 exports.getAriaAttributes = getAriaAttributes;
 exports.getCollectionProps = getCollectionProps;
-exports.getControlButtonProps = getControlButtonProps;
 exports.getFieldsetProps = getFieldsetProps;
@@ -235,0 +225,0 @@ exports.getFormControlProps = getFormControlProps;

hooks.d.ts

@@ -9,8 +9,7 @@ import { type FormId, type FieldName, type FormOptions } from '@conform-to/dom';
 export declare const useSafeLayoutEffect: typeof useEffect;
-export declare function useFormId<Schema extends Record<string, unknown>, Error>(preferredId?: string): FormId<Schema, Error>;
+export declare function useFormId<Schema extends Record<string, unknown>, FormError>(preferredId?: string): FormId<Schema, FormError>;
 export declare function useNoValidate(defaultNoValidate?: boolean): boolean;
-export declare function useForm<Schema extends Record<string, any>, Error = string[], Value = Schema>(options: Pretty<FormOptions<Schema, Error, Value> & {
+export declare function useForm<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(options: Pretty<Omit<FormOptions<Schema, FormError, FormValue>, 'formId'> & {
     /**
-     * If the form id is provided, Id for label,
-     * input and error elements will be derived.
+     * The form id. If not provided, a random id will be generated.
      */
@@ -24,21 +23,14 @@ id?: string;
     defaultNoValidate?: boolean;
-}>): {
-    meta: FormMetadata<Schema, Error>;
-    fields: ReturnType<FormMetadata<Schema, Error>['getFieldset']>;
-};
-export declare function useFormMetadata<Schema extends Record<string, any>, Error>(options: {
-    formId: FormId<Schema, Error>;
+}>): [
+    FormMetadata<Schema, FormError>,
+    ReturnType<FormMetadata<Schema, FormError>['getFieldset']>
+];
+export declare function useFormMetadata<Schema extends Record<string, any>, FormError>(formId: FormId<Schema, FormError>, options?: {
     defaultNoValidate?: boolean;
-}): FormMetadata<Schema, Error>;
-export declare function useField<FormSchema extends Record<string, unknown>, FieldSchema = FormSchema, Error = unknown>(options: {
-    formId: FormId<FormSchema, Error>;
-    name: FieldName<FieldSchema>;
-} | {
-    formId: FormId<FormSchema, Error>;
-    name?: undefined;
-}): {
-    meta: FieldMetadata<FieldSchema, Error, FormSchema>;
-    fields: FieldMetadata<FieldSchema, Error, FormSchema>['getFieldset'] extends Function ? ReturnType<FieldMetadata<FieldSchema, Error, FormSchema>['getFieldset']> : never;
-    list: FieldMetadata<FieldSchema, Error, FormSchema>['getFieldList'] extends Function ? ReturnType<FieldMetadata<FieldSchema, Error, FormSchema>['getFieldList']> : never;
-    form: FormMetadata<FormSchema, Error>;
-};
+}): FormMetadata<Schema, FormError>;
+export declare function useField<FieldSchema, FormError = string[], FormSchema extends Record<string, unknown> = Record<string, unknown>>(name: FieldName<FieldSchema, FormError, FormSchema>, options?: {
+    formId?: FormId<FormSchema, FormError>;
+}): [
+    FieldMetadata<FieldSchema, FormError, FormSchema>,
+    FormMetadata<FormSchema, FormError>
+];

hooks.js

@@ -5,2 +5,3 @@ 'use strict';
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
 var dom = require('@conform-to/dom');
@@ -34,9 +35,5 @@ var react = require('react');
   var formId = useFormId(options.id);
-  var initializeContext = () => dom.createFormContext(formId, options);
-  var [context$1, setFormContext] = react.useState(initializeContext);
-
-  // If id changes, reinitialize the form immediately
-  if (formId !== context$1.formId) {
-    setFormContext(initializeContext);
-  }
+  var [context$1] = react.useState(() => dom.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
+    formId
+  })));
   var optionsRef = react.useRef(options);
@@ -60,5 +57,2 @@ useSafeLayoutEffect(() => {
       context$1.report(options.lastResult);
-    } else {
-      var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(context$1.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
     }
@@ -68,3 +62,5 @@ }, [context$1, options.lastResult]);
     optionsRef.current = options;
-    context$1.update(options);
+    context$1.update(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, options), {}, {
+      formId
+    }));
   });
@@ -74,33 +70,21 @@ var subjectRef = context.useSubjectRef();
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
-  return {
-    meta,
-    fields: meta.getFieldset()
-  };
+  var form = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
+  return [form, form.getFieldset()];
 }
-function useFormMetadata(options) {
+function useFormMetadata(formId) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
-  var context$1 = context.useFormContext(options.formId);
+  var context$1 = context.useFormContext(formId);
   var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(options.formId, state, subjectRef, context$1, noValidate);
+  return context.getFormMetadata(context$1.formId, state, subjectRef, context$1, noValidate);
 }
-function useField(options) {
+function useField(name) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   var subjectRef = context.useSubjectRef();
   var context$1 = context.useFormContext(options.formId);
   var state = context.useFormState(context$1, subjectRef);
-  var meta = context.getFieldMetadata(options.formId, state, subjectRef, options.name);
-  var form = context.getFormMetadata(options.formId, state, subjectRef, context$1, false);
-  return {
-    meta,
-    // @ts-expect-error The types is used as a hint only
-    get fields() {
-      return meta.getFieldset();
-    },
-    // @ts-expect-error The types is used as a hint only
-    get list() {
-      return meta.getFieldList();
-    },
-    form
-  };
+  var field = context.getFieldMetadata(context$1.formId, state, subjectRef, name);
+  var form = context.getFormMetadata(context$1.formId, state, subjectRef, context$1, false);
+  return [field, form];
 }
@@ -107,0 +91,0 @@

index.d.ts

@@ -1,6 +0,6 @@
-export { type Submission, type SubmissionResult, type Intent, type FormId, type FieldName, requestIntent, requestSubmit, isFieldElement, intent, } from '@conform-to/dom';
-export { type FieldProps, type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
+export { type Submission, type SubmissionResult, type FormControl, type FormId, type FieldName, requestSubmit, isFieldElement, control, } from '@conform-to/dom';
+export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
 export { useInputControl } from './integrations';
 export { validateConstraint } from './validitystate';
-export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, getControlButtonProps, } from './helpers';
+export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

index.js

@@ -14,5 +14,5 @@ 'use strict';
 
-Object.defineProperty(exports, 'intent', {
+Object.defineProperty(exports, 'control', {
 	enumerable: true,
-	get: function () { return dom.intent; }
+	get: function () { return dom.control; }
 });
@@ -23,6 +23,2 @@ Object.defineProperty(exports, 'isFieldElement', {
 });
-Object.defineProperty(exports, 'requestIntent', {
-	enumerable: true,
-	get: function () { return dom.requestIntent; }
-});
 Object.defineProperty(exports, 'requestSubmit', {
@@ -40,3 +36,2 @@ enumerable: true,
 exports.getCollectionProps = helpers.getCollectionProps;
-exports.getControlButtonProps = helpers.getControlButtonProps;
 exports.getFieldsetProps = helpers.getFieldsetProps;
@@ -43,0 +38,0 @@ exports.getFormProps = helpers.getFormProps;

integrations.d.ts

@@ -1,6 +0,5 @@
-import { type FieldElement, type FormValue, FieldName, FormId } from '@conform-to/dom';
-import { type FieldMetadata } from './context';
-export type InputControl<Value> = {
-    value: Value;
-    change: (value: Value) => void;
+import { type FieldElement } from '@conform-to/dom';
+export type InputControl = {
+    value: string | undefined;
+    change: (value: string) => void;
     focus: () => void;
@@ -11,25 +10,7 @@ blur: () => void;
 export declare function getEventTarget(formId: string, name: string): FieldElement;
-export declare function useInputControl<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: {
-    onFocus?: (event: Event) => void;
-}): InputControl<string | undefined>;
-export declare function useInputControl<Schema>(options: {
-    key?: string;
-    name: FieldName<Schema>;
-    formId: FormId<any, any>;
-    initialValue: FormValue<Schema>;
-    onFocus?: (event: Event) => void;
-}): InputControl<string | undefined>;
-export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
-    initialize: (value: FormValue<Schema> | undefined) => Value;
-    serialize?: (value: Value) => string;
-    onFocus?: (event: Event) => void;
-}): InputControl<Value>;
-export declare function useInputControl<Schema, Value>(options: {
-    key?: string;
-    name: FieldName<Schema>;
-    formId: FormId<any, any>;
-    initialValue: FormValue<Schema>;
-    initialize: (value: FormValue<Schema> | undefined) => Value;
-    serialize?: (value: Value) => string;
-    onFocus?: (event: Event) => void;
-}): InputControl<Value>;
+export declare function useInputControl(options: {
+    key?: string | undefined;
+    name: string;
+    formId: string;
+    initialValue: string | undefined;
+}): InputControl;

integrations.js

@@ -35,4 +35,3 @@ 'use strict';
 }
-function useInputControl(metadata, options) {
-  var _options$initialize, _options$serialize, _options$onFocus;
+function useInputControl(options) {
   var eventDispatched = react.useRef({
@@ -43,32 +42,13 @@ change: false,
   });
-  var [key, setKey] = react.useState(metadata.key);
-  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : 'initialize' in metadata && metadata.initialize ? metadata.initialize : value => value === null || value === void 0 ? void 0 : value.toString();
-  var serialize = (_options$serialize = options === null || options === void 0 ? void 0 : options.serialize) !== null && _options$serialize !== void 0 ? _options$serialize : 'serialize' in metadata && metadata.serialize ? metadata.serialize : undefined;
-  var onFocus = (_options$onFocus = options === null || options === void 0 ? void 0 : options.onFocus) !== null && _options$onFocus !== void 0 ? _options$onFocus : 'onFocus' in metadata ? metadata.onFocus : undefined;
-  var optionsRef = react.useRef({
-    initialize,
-    serialize,
-    onFocus
-  });
-  var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
-  if (key !== metadata.key) {
-    setValue(initialize(metadata.initialValue));
-    setKey(metadata.key);
+  var [key, setKey] = react.useState(options.key);
+  var [value, setValue] = react.useState(() => options.initialValue);
+  if (key !== options.key) {
+    setValue(options.initialValue);
+    setKey(options.key);
   }
   react.useEffect(() => {
-    optionsRef.current = {
-      initialize,
-      serialize,
-      onFocus
-    };
-  });
-  react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        var element = getFieldElement(options.formId, options.name, element => element === event.target);
         if (element) {
-          if (listener === 'focus') {
-            var _optionsRef$current, _optionsRef$current$o;
-            (_optionsRef$current = optionsRef.current) === null || _optionsRef$current === void 0 || (_optionsRef$current$o = _optionsRef$current.onFocus) === null || _optionsRef$current$o === void 0 || _optionsRef$current$o.call(_optionsRef$current, event);
-          }
           eventDispatched.current[listener] = true;
@@ -89,3 +69,3 @@ }
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   var handlers = react.useMemo(() => {
@@ -95,46 +75,41 @@ return {
         if (!eventDispatched.current.change) {
-          var _ref, _optionsRef$current$s, _optionsRef$current$s2, _optionsRef$current2;
-          var _element = getEventTarget(metadata.formId, metadata.name);
-          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current$s2 = (_optionsRef$current2 = optionsRef.current).serialize) === null || _optionsRef$current$s2 === void 0 ? void 0 : _optionsRef$current$s2.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          var _element = getEventTarget(options.formId, options.name);
           eventDispatched.current.change = true;
           if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
-            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
-              _element.click();
-            }
-          } else {
+            _element.checked = _element.value === value;
+          } else if (_element.value !== value) {
             // No change event will be triggered on React if `element.value` is already updated
-            if (_element.value !== serializedValue) {
-              /**
-               * Triggering react custom change event
-               * Solution based on dom-testing-library
-               * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
-               * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
-               */
-              var {
-                set: valueSetter
-              } = Object.getOwnPropertyDescriptor(_element, 'value') || {};
-              var prototype = Object.getPrototypeOf(_element);
-              var {
-                set: prototypeValueSetter
-              } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
-              if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
-                prototypeValueSetter.call(_element, value);
+
+            /**
+             * Triggering react custom change event
+             * Solution based on dom-testing-library
+             * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+             * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+             */
+            var {
+              set: valueSetter
+            } = Object.getOwnPropertyDescriptor(_element, 'value') || {};
+            var prototype = Object.getPrototypeOf(_element);
+            var {
+              set: prototypeValueSetter
+            } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+            if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+              prototypeValueSetter.call(_element, value);
+            } else {
+              if (valueSetter) {
+                valueSetter.call(_element, value);
               } else {
-                if (valueSetter) {
-                  valueSetter.call(_element, value);
-                } else {
-                  throw new Error('The given element does not have a value setter');
-                }
+                throw new Error('The given element does not have a value setter');
               }
             }
+          }
 
-            // Dispatch input event with the updated input value
-            _element.dispatchEvent(new InputEvent('input', {
-              bubbles: true
-            }));
-            // Dispatch change event (necessary for select to update the selected option)
-            _element.dispatchEvent(new Event('change', {
-              bubbles: true
-            }));
-          }
+          // Dispatch input event with the updated input value
+          _element.dispatchEvent(new InputEvent('input', {
+            bubbles: true
+          }));
+          // Dispatch change event (necessary for select to update the selected option)
+          _element.dispatchEvent(new Event('change', {
+            bubbles: true
+          }));
         }
@@ -146,3 +121,3 @@ setValue(value);
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(metadata.formId, metadata.name);
+          var _element2 = getEventTarget(options.formId, options.name);
           eventDispatched.current.focus = true;
@@ -158,3 +133,3 @@ _element2.dispatchEvent(new FocusEvent('focusin', {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          var _element3 = getEventTarget(options.formId, options.name);
           eventDispatched.current.blur = true;
@@ -169,3 +144,3 @@ _element3.dispatchEvent(new FocusEvent('focusout', {
     };
-  }, [metadata.formId, metadata.name]);
+  }, [options.formId, options.name]);
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
@@ -172,0 +147,0 @@ value

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.0-pre.4",
+	"version": "1.0.0-pre.5",
 	"main": "index.js",
@@ -34,3 +34,3 @@ "module": "index.mjs",
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-pre.4"
+		"@conform-to/dom": "1.0.0-pre.5"
 	},
@@ -37,0 +37,0 @@ "devDependencies": {

No alert changes

Worsened metrics

Total package byte prevSize

94082

decreased by-7.48%

Lines of code

1797

decreased by-7.7%

Dependency changes

• + Added@conform-to/dom@1.0.0-pre.5(transitive)

• - Removed@conform-to/dom@1.0.0-pre.4(transitive)

• Updated@conform-to/dom@1.0.0-pre.5