@conform-to/react - npm Package Compare versions

Comparing version 1.0.0-rc.0 to 1.0.0-rc.1

context.d.ts

@@ -1,3 +0,3 @@
-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> = {
@@ -38,3 +38,3 @@ [K in keyof T]: T[K];
 };
-export declare const Form: import("react").Context<FormContext[]>;
+export declare const Form: import("react").Context<FormContext<any, string[], any>[]>;
 declare const wrappedSymbol: unique symbol;
@@ -45,6 +45,6 @@ export type Wrapped<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;
@@ -59,3 +59,14 @@ }): ReactElement;
 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 {};

context.js

@@ -10,2 +10,3 @@ 'use strict';
 
+var _excluded = ["onSubmit"];
 var Form = /*#__PURE__*/react.createContext([]);
@@ -178,9 +179,3 @@
         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':
@@ -193,2 +188,25 @@ return 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);
+    }
+  });
+}
 
@@ -198,2 +216,3 @@ exports.Form = Form;
 exports.FormStateInput = FormStateInput;
+exports.createFormContext = createFormContext;
 exports.getFieldMetadata = getFieldMetadata;
@@ -200,0 +219,0 @@ exports.getFormMetadata = getFormMetadata;

helpers.d.ts

@@ -30,3 +30,3 @@ /// <reference types="react" />
 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;
@@ -33,0 +33,0 @@ maxLength?: number;

hooks.d.ts

@@ -1,4 +0,4 @@
-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';
 /**
@@ -5,0 +5,0 @@ * useLayoutEffect is client-only.

hooks.js

@@ -6,3 +6,2 @@ 'use strict';
 var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
-var dom = require('@conform-to/dom');
 var react = require('react');
@@ -41,3 +40,3 @@ var context = require('./context.js');
   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
@@ -44,0 +43,0 @@ })));

index.d.ts

 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.json

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

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

80798

increased by2.68%

Lines of code

1788

increased by2.64%

Dependency changes

• + Added@conform-to/dom@1.0.0-rc.1(transitive)

• - Removed@conform-to/dom@1.0.0-rc.0(transitive)

• Updated@conform-to/dom@1.0.0-rc.1