@conform-to/react 1.0.0-rc.0 → 1.0.0-rc.1

package/README

@@ -10,7 +10,7 @@
 
 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/index.d.ts

@@ -1,5 +1,5 @@
 export { type Submission, type SubmissionResult, type DefaultValue, type Intent, type FormId, type FieldName, parse, } from '@conform-to/dom';
 export { type FieldMetadata, type FormMetadata, FormProvider, FormStateInput, } from './context';
 export { useForm, useFormMetadata, useField } from './hooks';
-export { type InputControlOptions, useInputControl } from './integrations';
+export { useInputControl } from './integrations';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0-rc.0",
+	"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-rc.0"
+		"@conform-to/dom": "1.0.0-rc.1"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",