@conform-to/react 1.0.0-pre.7 → 1.0.0-rc.1

package/README

@@ -8,9 +8,9 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.0-pre.7 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.0-rc.0 / License MIT / Copyright (c) 2024 Edmund Hung
 
-A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix route action and Next.js server actions.
+A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
 
 > Getting Started
 
@@ -21,7 +21,7 @@ Check out the overview and tutorial at our website https://conform.guide
 The documentation is divided into several sections:
 
 * Overview: https://conform.guide/overview
-* Example Usages: https://conform.guide/examples
+* Examples: https://conform.guide/examples
 * Complex structures: https://conform.guide/complex-structures
 * UI Integrations: https://conform.guide/integrations
 * Accessibility Guide: https://conform.guide/accessibility

package/context.d.ts

@@ -1,5 +1,5 @@
-import { type Constraint, type FormId, type FieldName, type FormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
-import { type ReactElement, type ReactNode, type MutableRefObject } from 'react';
+import { type Constraint, type FormId, type FieldName, type FormContext as BaseFormContext, type FormValue, type FormState, type Intent, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType, type FormOptions as BaseFormOptions } from '@conform-to/dom';
+import { type FormEvent, type ReactElement, type ReactNode, type MutableRefObject } from 'react';
 export type Pretty<T> = {
     [K in keyof T]: T[K];
 } & {};
@@ -35,16 +35,16 @@ export type FieldMetadata<Schema = unknown, FormSchema extends Record<string, an
     };
     getFieldList: unknown extends Schema ? () => unknown : Schema extends Array<infer Item> ? () => Array<FieldMetadata<Item, FormSchema, FormError>> : never;
 };
-export declare const Form: import("react").Context<FormContext[]>;
+export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
 declare const wrappedSymbol: unique symbol;
 export type Wrapped<Type> = {
     [wrappedSymbol]: Type;
 };
 export declare function getWrappedFormContext(context: Wrapped<FormContext>): FormContext;
-export declare function useFormContext<Schema extends Record<string, any>, FormError>(formId?: FormId<Schema, FormError>): FormContext<Schema, unknown, FormError>;
-export declare function useFormState<FormError>(form: FormContext<any, any, FormError>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<FormError>;
+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: {
-    context: Wrapped<FormContext<any, any, any>>;
+    context: Wrapped<FormContext<any, any>>;
     children: ReactNode;
 }): ReactElement;
 export declare function FormStateInput(props: {
@@ -54,5 +54,16 @@ export declare function useSubjectRef(initialSubject?: SubscriptionSubject): Mut
 export declare function updateSubjectRef(ref: MutableRefObject<SubscriptionSubject>, name: string, subject: keyof SubscriptionSubject, scope: keyof SubscriptionScope): void;
 export declare function getMetadata<Schema, FormError, FormSchema extends Record<string, any>>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, name?: FieldName<Schema, FormSchema, FormError>): Metadata<Schema, FormSchema, FormError>;
 export declare function getFieldMetadata<Schema, FormSchema extends Record<string, any>, FormError>(formId: FormId<FormSchema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, prefix?: string, key?: string | number): FieldMetadata<Schema, FormSchema, FormError>;
-export declare function getFormMetadata<Schema extends Record<string, any>, FormValue = Schema, FormError = string[]>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormValue, FormError>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export declare function getFormMetadata<Schema extends Record<string, any>, FormError = string[], FormValue = Schema>(formId: FormId<Schema, FormError>, state: FormState<FormError>, subjectRef: MutableRefObject<SubscriptionSubject>, context: FormContext<Schema, FormError, FormValue>, noValidate: boolean): FormMetadata<Schema, FormError>;
+export type FormOptions<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = BaseFormOptions<Schema, FormError, FormValue> & {
+    /**
+     * A function to be called before the form is submitted.
+     */
+    onSubmit?: (event: FormEvent<HTMLFormElement>, context: ReturnType<BaseFormContext<Schema, FormError, FormValue>['submit']>) => void;
+};
+export type FormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema> = Omit<BaseFormContext<Schema, FormError, FormValue>, 'submit' | 'onUpdate'> & {
+    submit: (event: FormEvent<HTMLFormElement>) => void;
+    onUpdate: (options: Partial<FormOptions<Schema, FormError, FormValue>>) => void;
+};
+export declare function createFormContext<Schema extends Record<string, any> = any, FormError = string[], FormValue = Schema>(options: FormOptions<Schema, FormError, FormValue>): FormContext<Schema, FormError, FormValue>;
 export {};

package/context.js

@@ -7,6 +7,7 @@ var dom = require('@conform-to/dom');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
+var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/react.createContext([]);
 
 // To hide the FormContext type from the public API
@@ -174,13 +175,7 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'reorder':
           return context[key];
         case 'onSubmit':
-          return event => {
-            var submitEvent = event.nativeEvent;
-            var submission = context.submit(submitEvent);
-            if (submission && submission.status !== 'success' && submission.error !== null) {
-              event.preventDefault();
-            }
-          };
+          return context.submit;
         case 'noValidate':
           return noValidate;
       }
@@ -188,10 +183,34 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     }
   });
 }
+function createFormContext(options) {
+  var {
+      onSubmit
+    } = options,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
+  var context = dom.unstable_createFormContext(rest);
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, context), {}, {
+    submit(event) {
+      var submitEvent = event.nativeEvent;
+      var result = context.submit(submitEvent);
+      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+        event.preventDefault();
+      } else {
+        var _onSubmit;
+        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+      }
+    },
+    onUpdate(options) {
+      onSubmit = options.onSubmit;
+      context.onUpdate(options);
+    }
+  });
+}
 
 exports.Form = Form;
 exports.FormProvider = FormProvider;
 exports.FormStateInput = FormStateInput;
+exports.createFormContext = createFormContext;
 exports.getFieldMetadata = getFieldMetadata;
 exports.getFormMetadata = getFormMetadata;
 exports.getMetadata = getMetadata;

package/context.mjs

@@ -1,8 +1,9 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { STATE, formatPaths, getPaths, isPrefix } from '@conform-to/dom';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { STATE, formatPaths, getPaths, unstable_createFormContext, isPrefix } from '@conform-to/dom';
 import { useContext, useMemo, createContext, useCallback, useSyncExternalStore, useRef } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
+var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/createContext([]);
 
 // To hide the FormContext type from the public API
@@ -170,13 +171,7 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
         case 'reorder':
           return context[key];
         case 'onSubmit':
-          return event => {
-            var submitEvent = event.nativeEvent;
-            var submission = context.submit(submitEvent);
-            if (submission && submission.status !== 'success' && submission.error !== null) {
-              event.preventDefault();
-            }
-          };
+          return context.submit;
         case 'noValidate':
           return noValidate;
       }
@@ -184,5 +179,28 @@ function getFormMetadata(formId, state, subjectRef, context, noValidate) {
     }
   });
 }
+function createFormContext(options) {
+  var {
+      onSubmit
+    } = options,
+    rest = _objectWithoutProperties(options, _excluded);
+  var context = unstable_createFormContext(rest);
+  return _objectSpread2(_objectSpread2({}, context), {}, {
+    submit(event) {
+      var submitEvent = event.nativeEvent;
+      var result = context.submit(submitEvent);
+      if (result.submission && result.submission.status !== 'success' && result.submission.error !== null) {
+        event.preventDefault();
+      } else {
+        var _onSubmit;
+        (_onSubmit = onSubmit) === null || _onSubmit === void 0 || _onSubmit(event, result);
+      }
+    },
+    onUpdate(options) {
+      onSubmit = options.onSubmit;
+      context.onUpdate(options);
+    }
+  });
+}
 
-export { Form, FormProvider, FormStateInput, getFieldMetadata, getFormMetadata, getMetadata, getWrappedFormContext, updateSubjectRef, useFormContext, useFormState, useSubjectRef };
+export { Form, FormProvider, FormStateInput, createFormContext, getFieldMetadata, getFormMetadata, getMetadata, getWrappedFormContext, updateSubjectRef, useFormContext, useFormState, useSubjectRef };

package/helpers.d.ts

@@ -27,7 +27,7 @@ type FormControlOptions = {
     ariaAttributes: false;
 };
 type InputProps = Pretty<FormControlProps & {
-    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
+    type: 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'search' | 'tel' | 'text' | 'time' | 'url' | 'week';
     minLength?: number;
     maxLength?: number;
     min?: string | number;

package/hooks.d.ts

@@ -1,6 +1,6 @@
-import { type FormId, type FieldName, type FormOptions } from '@conform-to/dom';
+import { type FormId, type FieldName } from '@conform-to/dom';
 import { useEffect } from 'react';
-import { type FormMetadata, type FieldMetadata, type Pretty } from './context';
+import { type FormMetadata, type FieldMetadata, type Pretty, type FormOptions } from './context';
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server

package/hooks.js

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 var react = require('react');
 var context = require('./context.js');
 
@@ -37,7 +36,7 @@ function useForm(options) {
     } = options,
     formConfig = _rollupPluginBabelHelpers.objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
-  var [context$1] = react.useState(() => dom.unstable_createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
+  var [context$1] = react.useState(() => context.createFormContext(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, formConfig), {}, {
     formId
   })));
   useSafeLayoutEffect(() => {

package/hooks.mjs

@@ -1,7 +1,6 @@
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { unstable_createFormContext } from '@conform-to/dom';
 import { useState, useEffect, useLayoutEffect, useId } from 'react';
-import { useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
+import { createFormContext, useSubjectRef, useFormState, getFormMetadata, useFormContext, getFieldMetadata } from './context.mjs';
 
 var _excluded = ["id"];
 
@@ -33,7 +32,7 @@ function useForm(options) {
     } = options,
     formConfig = _objectWithoutProperties(options, _excluded);
   var formId = useFormId(id);
-  var [context] = useState(() => unstable_createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
+  var [context] = useState(() => createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
     formId
   })));
   useSafeLayoutEffect(() => {

package/integrations.d.ts

@@ -1,4 +1,5 @@
 import { type FieldElement } from '@conform-to/dom';
+import { type Key } from 'react';
 export type InputControl = {
     value: string | undefined;
     change: (value: string) => void;
@@ -7,9 +8,10 @@ export type InputControl = {
 };
 export declare function getFieldElement(formId: string, name: string, match?: (element: FieldElement) => boolean): FieldElement | null;
 export declare function getEventTarget(formId: string, name: string): FieldElement;
-export declare function useInputControl(meta: {
-    key?: string | null | undefined;
+export type InputControlOptions = {
+    key?: Key | null | undefined;
     name: string;
     formId: string;
     initialValue?: string | undefined;
-}): InputControl;
+};
+export declare function useInputControl(metaOrOptions: InputControlOptions): InputControl;

package/integrations.js

@@ -32,22 +32,22 @@ function getEventTarget(formId, name) {
   form === null || form === void 0 || form.appendChild(input);
   return input;
 }
-function useInputControl(meta) {
+function useInputControl(metaOrOptions) {
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = react.useState(meta.key);
-  var [value, setValue] = react.useState(() => meta.initialValue);
-  if (key !== meta.key) {
-    setValue(meta.initialValue);
-    setKey(meta.key);
+  var [key, setKey] = react.useState(metaOrOptions.key);
+  var [value, setValue] = react.useState(() => metaOrOptions.initialValue);
+  if (key !== metaOrOptions.key) {
+    setValue(metaOrOptions.initialValue);
+    setKey(metaOrOptions.key);
   }
   react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
+        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
         if (element) {
           eventDispatched.current[listener] = true;
         }
@@ -64,12 +64,12 @@ function useInputControl(meta) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [meta.formId, meta.name]);
+  }, [metaOrOptions.formId, metaOrOptions.name]);
   var handlers = react.useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(meta.formId, meta.name);
+          var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.change = true;
           if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
             _element.checked = _element.value === value;
@@ -114,7 +114,7 @@ function useInputControl(meta) {
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(meta.formId, meta.name);
+          var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -125,7 +125,7 @@ function useInputControl(meta) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(meta.formId, meta.name);
+          var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -135,7 +135,7 @@ function useInputControl(meta) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [meta.formId, meta.name]);
+  }, [metaOrOptions.formId, metaOrOptions.name]);
   return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
     value
   });

package/integrations.mjs

@@ -28,22 +28,22 @@ function getEventTarget(formId, name) {
   form === null || form === void 0 || form.appendChild(input);
   return input;
 }
-function useInputControl(meta) {
+function useInputControl(metaOrOptions) {
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = useState(meta.key);
-  var [value, setValue] = useState(() => meta.initialValue);
-  if (key !== meta.key) {
-    setValue(meta.initialValue);
-    setKey(meta.key);
+  var [key, setKey] = useState(metaOrOptions.key);
+  var [value, setValue] = useState(() => metaOrOptions.initialValue);
+  if (key !== metaOrOptions.key) {
+    setValue(metaOrOptions.initialValue);
+    setKey(metaOrOptions.key);
   }
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
+        var element = getFieldElement(metaOrOptions.formId, metaOrOptions.name, element => element === event.target);
         if (element) {
           eventDispatched.current[listener] = true;
         }
@@ -60,12 +60,12 @@ function useInputControl(meta) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [meta.formId, meta.name]);
+  }, [metaOrOptions.formId, metaOrOptions.name]);
   var handlers = useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(meta.formId, meta.name);
+          var _element = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.change = true;
           if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
             _element.checked = _element.value === value;
@@ -110,7 +110,7 @@ function useInputControl(meta) {
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(meta.formId, meta.name);
+          var _element2 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -121,7 +121,7 @@ function useInputControl(meta) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(meta.formId, meta.name);
+          var _element3 = getEventTarget(metaOrOptions.formId, metaOrOptions.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -131,7 +131,7 @@ function useInputControl(meta) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [meta.formId, meta.name]);
+  }, [metaOrOptions.formId, metaOrOptions.name]);
   return _objectSpread2(_objectSpread2({}, handlers), {}, {
     value
   });

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0-pre.7",
+	"version": "1.0.0-rc.1",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,7 +30,7 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-pre.7"
+		"@conform-to/dom": "1.0.0-rc.1"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",