@conform-to/react - npm Package Compare versions

Comparing version 1.0.0-pre.2 to 1.0.0-pre.3

_virtual/_rollupPluginBabelHelpers.js

@@ -5,22 +5,22 @@ 'use strict';
 
-function ownKeys(object, enumerableOnly) {
-  var keys = Object.keys(object);
+function ownKeys(e, r) {
+  var t = Object.keys(e);
   if (Object.getOwnPropertySymbols) {
-    var symbols = Object.getOwnPropertySymbols(object);
-    enumerableOnly && (symbols = symbols.filter(function (sym) {
-      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
-    })), keys.push.apply(keys, symbols);
+    var o = Object.getOwnPropertySymbols(e);
+    r && (o = o.filter(function (r) {
+      return Object.getOwnPropertyDescriptor(e, r).enumerable;
+    })), t.push.apply(t, o);
   }
-  return keys;
+  return t;
 }
-function _objectSpread2(target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = null != arguments[i] ? arguments[i] : {};
-    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
-      _defineProperty(target, key, source[key]);
-    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
-      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+function _objectSpread2(e) {
+  for (var r = 1; r < arguments.length; r++) {
+    var t = null != arguments[r] ? arguments[r] : {};
+    r % 2 ? ownKeys(Object(t), !0).forEach(function (r) {
+      _defineProperty(e, r, t[r]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) {
+      Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r));
     });
   }
-  return target;
+  return e;
 }
@@ -27,0 +27,0 @@ function _defineProperty(obj, key, value) {

context.d.ts

@@ -1,2 +0,2 @@
-import { type Constraint, type FormId, type FieldName, type Form, type FormValue, type FormState, type SubscriptionScope, type SubscriptionSubject, type UnionKeyof, type UnionKeyType } from '@conform-to/dom';
+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 ReactElement, type ReactNode, type MutableRefObject } from 'react';
@@ -21,4 +21,4 @@ export type Pretty<T> = {
     value: FormValue<Schema>;
-    error: Error | undefined;
-    allError: Record<string, Error>;
+    errors: Error | undefined;
+    allErrors: Record<string, Error>;
     allValid: boolean;
@@ -30,3 +30,3 @@ valid: boolean;
     id: FormId<Schema, Error>;
-    context: Form<Schema, Error>;
+    context: FormContext<Schema, Error>;
     status?: 'success' | 'error';
@@ -36,3 +36,3 @@ getFieldset: () => {
     };
-    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<Form<Schema>['submit']>;
+    onSubmit: (event: React.FormEvent<HTMLFormElement>) => ReturnType<FormContext<Schema>['submit']>;
     onReset: (event: React.FormEvent<HTMLFormElement>) => void;
@@ -50,7 +50,7 @@ noValidate: boolean;
 };
-export declare const Registry: import("react").Context<Record<string, Form>>;
-export declare function useRegistry<Schema extends Record<string, any>, Error, Value = Schema>(formId: FormId<Schema, Error>, context?: Form<Schema, Error, Value>): Form<Schema, Error, Value>;
-export declare function useFormState<Error>(form: Form<any, Error>, subjectRef?: MutableRefObject<SubscriptionSubject>): FormState<Error>;
+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 function FormProvider(props: {
-    context: Form<any, any, any>;
+    context: FormContext<any, any, any>;
     children: ReactNode;
@@ -63,3 +63,3 @@ }): ReactElement;
     formId?: undefined;
-    context: Form;
+    context: FormContext;
 }): React.ReactElement;
@@ -70,2 +70,2 @@ export declare function useSubjectRef(initialSubject?: SubscriptionSubject): MutableRefObject<SubscriptionSubject>;
 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>, form: Form<Schema, Error, any>, noValidate: boolean): FormMetadata<Schema, Error>;
+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>;

context.js

@@ -11,3 +11,3 @@ 'use strict';
 var Registry = /*#__PURE__*/react.createContext({});
-function useRegistry(formId, context) {
+function useFormContext(formId, context) {
   var registry = react.useContext(Registry);
@@ -27,3 +27,3 @@ var form = context !== null && context !== void 0 ? context : registry[formId];
   var value = react.useMemo(() => _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, registry), {}, {
-    [props.context.id]: props.context
+    [props.context.formId]: props.context
   }), [registry, props.context]);
@@ -37,7 +37,7 @@ return /*#__PURE__*/jsxRuntime.jsx(Registry.Provider, {
   var _props$formId;
-  var form = useRegistry((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.id, props.context);
+  var context = useFormContext((_props$formId = props.formId) !== null && _props$formId !== void 0 ? _props$formId : props.context.formId, props.context);
   return /*#__PURE__*/jsxRuntime.jsx("input", {
     type: "hidden",
     name: dom.STATE,
-    value: form.getSerializedState(),
+    value: context.getSerializedState(),
     form: props.formId
@@ -74,3 +74,3 @@ });
     value: state.value[name],
-    error: state.error[name],
+    errors: state.error[name],
     get key() {
@@ -97,3 +97,3 @@ return state.key[name];
     },
-    get allError() {
+    get allErrors() {
       if (name === '') {
@@ -124,3 +124,3 @@ return state.error;
         case 'key':
-        case 'error':
+        case 'errors':
         case 'initialValue':
@@ -130,5 +130,5 @@ case 'value':
         case 'dirty':
-          updateSubjectRef(subjectRef, name, key, 'name');
+          updateSubjectRef(subjectRef, name, key === 'errors' ? 'error' : key, 'name');
           break;
-        case 'allError':
+        case 'allErrors':
           updateSubjectRef(subjectRef, name, 'error', 'prefix');
@@ -175,3 +175,3 @@ break;
 }
-function getFormMetadata(formId, state, subjectRef, form, noValidate) {
+function getFormMetadata(formId, state, subjectRef, context, noValidate) {
   var metadata = getMetadata(formId, state, subjectRef);
@@ -182,3 +182,3 @@ return new Proxy(metadata, {
         case 'context':
-          return form;
+          return context;
         case 'status':
@@ -189,3 +189,3 @@ return state.submissionStatus;
             var submitEvent = event.nativeEvent;
-            form.submit(submitEvent);
+            context.submit(submitEvent);
             if (submitEvent.defaultPrevented) {
@@ -210,4 +210,4 @@ event.preventDefault();
 exports.updateSubjectRef = updateSubjectRef;
+exports.useFormContext = useFormContext;
 exports.useFormState = useFormState;
-exports.useRegistry = useRegistry;
 exports.useSubjectRef = useSubjectRef;

helpers.d.ts

@@ -5,2 +5,3 @@ /// <reference types="react" />
 type FormControlProps = {
+    key: string | undefined;
     id: string;
@@ -11,3 +12,2 @@ name: string;
     autoFocus?: boolean;
-    tabIndex?: number;
     'aria-describedby'?: string;
@@ -124,12 +124,3 @@ 'aria-invalid'?: boolean;
  */
-export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, 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>;
-    key: string | undefined;
-    required: true | undefined;
-    autoFocus: true | undefined;
-};
+export declare function getFormControlProps<Schema, Error>(metadata: FieldMetadata<Schema, Error, any>, options?: FormControlOptions): FormControlProps;
 /**
@@ -225,3 +216,3 @@ * 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, intents: Array<Intent>): {
+export declare function getControlButtonProps(formId: string, intent: Intent): {
     name: string;
@@ -228,0 +219,0 @@ value: string;

helpers.js

@@ -220,6 +220,6 @@ 'use strict';
 }
-function getControlButtonProps(formId, intents) {
+function getControlButtonProps(formId, intent) {
   return {
     name: dom.INTENT,
-    value: dom.serializeIntents(intents),
+    value: dom.serializeIntent(intent),
     form: formId,
@@ -226,0 +226,0 @@ formNoValidate: true

hooks.js

@@ -33,20 +33,20 @@ 'use strict';
   var formId = useFormId(options.id);
-  var initializeContext = () => dom.createForm(formId, options);
-  var [form, setForm] = react.useState(initializeContext);
+  var initializeContext = () => dom.createFormContext(formId, options);
+  var [context$1, setFormContext] = react.useState(initializeContext);
 
   // If id changes, reinitialize the form immediately
-  if (formId !== form.id) {
-    setForm(initializeContext);
+  if (formId !== context$1.formId) {
+    setFormContext(initializeContext);
   }
   var optionsRef = react.useRef(options);
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', form.input);
-    document.addEventListener('focusout', form.blur);
-    document.addEventListener('reset', form.reset);
+    document.addEventListener('input', context$1.input);
+    document.addEventListener('focusout', context$1.blur);
+    document.addEventListener('reset', context$1.reset);
     return () => {
-      document.removeEventListener('input', form.input);
-      document.removeEventListener('focusout', form.blur);
-      document.removeEventListener('reset', form.reset);
+      document.removeEventListener('input', context$1.input);
+      document.removeEventListener('focusout', context$1.blur);
+      document.removeEventListener('reset', context$1.reset);
     };
-  }, [form]);
+  }, [context$1]);
   useSafeLayoutEffect(() => {
@@ -58,16 +58,16 @@ if (options.lastResult === optionsRef.current.lastResult) {
     if (options.lastResult) {
-      form.report(options.lastResult);
+      context$1.report(options.lastResult);
     } else {
       var _document$forms$named;
-      (_document$forms$named = document.forms.namedItem(form.id)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.reset();
+      (_document$forms$named = document.forms.namedItem(context$1.formId)) === null || _document$forms$named === void 0 || _document$forms$named.reset();
     }
-  }, [form, options.lastResult]);
+  }, [context$1, options.lastResult]);
   useSafeLayoutEffect(() => {
     optionsRef.current = options;
-    form.update(options);
+    context$1.update(options);
   });
   var subjectRef = context.useSubjectRef();
-  var state = context.useFormState(form, subjectRef);
+  var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  var meta = context.getFormMetadata(formId, state, subjectRef, form, noValidate);
+  var meta = context.getFormMetadata(formId, state, subjectRef, context$1, noValidate);
   return {
@@ -80,10 +80,10 @@ meta,
   var subjectRef = context.useSubjectRef();
-  var form = context.useRegistry(options.formId);
-  var state = context.useFormState(form, subjectRef);
+  var context$1 = context.useFormContext(options.formId);
+  var state = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
-  return context.getFormMetadata(options.formId, state, subjectRef, form, noValidate);
+  return context.getFormMetadata(options.formId, state, subjectRef, context$1, noValidate);
 }
 function useField(options) {
   var subjectRef = context.useSubjectRef();
-  var context$1 = context.useRegistry(options.formId);
+  var context$1 = context.useFormContext(options.formId);
   var state = context.useFormState(context$1, subjectRef);
@@ -90,0 +90,0 @@ var meta = context.getFieldMetadata(options.formId, state, subjectRef, options.name);

integrations.js

@@ -32,3 +32,3 @@ 'use strict';
   input.name = name;
-  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  form === null || form === void 0 || form.appendChild(input);
   return input;
@@ -71,3 +71,3 @@ }
             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 ? void 0 : _optionsRef$current$o.call(_optionsRef$current, event);
+            (_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);
           }
@@ -74,0 +74,0 @@ eventDispatched.current[listener] = true;

package.json

@@ -6,3 +6,3 @@ {
 	"license": "MIT",
-	"version": "1.0.0-pre.2",
+	"version": "1.0.0-pre.3",
 	"main": "index.js",
@@ -34,4 +34,8 @@ "module": "index.mjs",
 	"dependencies": {
-		"@conform-to/dom": "1.0.0-pre.2"
+		"@conform-to/dom": "1.0.0-pre.3"
 	},
+	"devDependencies": {
+		"@types/react": "^18.2.43",
+		"react": "^18.2.0"
+	},
 	"peerDependencies": {
@@ -38,0 +42,0 @@ "react": ">=18"

No alert changes

Worsened metrics

Total package byte prevSize

101687

decreased by-0.14%

Dev dependency count

2

increased byInfinity%

Lines of code

1947

decreased by-0.41%

Dependency changes

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

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

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