@conform-to/react 1.0.0-pre.5 → 1.0.0-pre.7

package/hooks.mjs

@@ -1,8 +1,10 @@
-import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { createFormContext } from '@conform-to/dom';
-import { useState, useRef, useEffect, useLayoutEffect, useId } from 'react';
+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';
 
+var _excluded = ["id"];
+
 /**
  * useLayoutEffect is client-only.
  * This basically makes it a no-op on server
@@ -26,33 +28,26 @@ function useNoValidate() {
   return noValidate;
 }
 function useForm(options) {
-  var formId = useFormId(options.id);
-  var [context] = useState(() => createFormContext(_objectSpread2(_objectSpread2({}, options), {}, {
+  var {
+      id
+    } = options,
+    formConfig = _objectWithoutProperties(options, _excluded);
+  var formId = useFormId(id);
+  var [context] = useState(() => unstable_createFormContext(_objectSpread2(_objectSpread2({}, formConfig), {}, {
     formId
   })));
-  var optionsRef = useRef(options);
   useSafeLayoutEffect(() => {
-    document.addEventListener('input', context.input);
-    document.addEventListener('focusout', context.blur);
-    document.addEventListener('reset', context.reset);
+    document.addEventListener('input', context.onInput);
+    document.addEventListener('focusout', context.onBlur);
+    document.addEventListener('reset', context.onReset);
     return () => {
-      document.removeEventListener('input', context.input);
-      document.removeEventListener('focusout', context.blur);
-      document.removeEventListener('reset', context.reset);
+      document.removeEventListener('input', context.onInput);
+      document.removeEventListener('focusout', context.onBlur);
+      document.removeEventListener('reset', context.onReset);
     };
   }, [context]);
   useSafeLayoutEffect(() => {
-    if (options.lastResult === optionsRef.current.lastResult) {
-      // If there is no change, do nothing
-      return;
-    }
-    if (options.lastResult) {
-      context.report(options.lastResult);
-    }
-  }, [context, options.lastResult]);
-  useSafeLayoutEffect(() => {
-    optionsRef.current = options;
-    context.update(_objectSpread2(_objectSpread2({}, options), {}, {
+    context.onUpdate(_objectSpread2(_objectSpread2({}, formConfig), {}, {
       formId
     }));
   });

package/index.d.ts

@@ -1,6 +1,5 @@
-export { type Submission, type SubmissionResult, type FormControl, type FormId, type FieldName, requestSubmit, isFieldElement, control, } from '@conform-to/dom';
+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 { useInputControl } from './integrations';
-export { validateConstraint } from './validitystate';
 export { getFormProps, getFieldsetProps, getInputProps, getSelectProps, getTextareaProps, getCollectionProps, } from './helpers';

package/index.js

@@ -6,22 +6,13 @@ var dom = require('@conform-to/dom');
 var context = require('./context.js');
 var hooks = require('./hooks.js');
 var integrations = require('./integrations.js');
-var validitystate = require('./validitystate.js');
 var helpers = require('./helpers.js');
 
 
 
-Object.defineProperty(exports, 'control', {
+Object.defineProperty(exports, 'parse', {
 	enumerable: true,
-	get: function () { return dom.control; }
-});
-Object.defineProperty(exports, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
-Object.defineProperty(exports, 'requestSubmit', {
-	enumerable: true,
-	get: function () { return dom.requestSubmit; }
+	get: function () { return dom.parse; }
 });
 exports.FormProvider = context.FormProvider;
 exports.FormStateInput = context.FormStateInput;
@@ -29,7 +20,6 @@ exports.useField = hooks.useField;
 exports.useForm = hooks.useForm;
 exports.useFormMetadata = hooks.useFormMetadata;
 exports.useInputControl = integrations.useInputControl;
-exports.validateConstraint = validitystate.validateConstraint;
 exports.getCollectionProps = helpers.getCollectionProps;
 exports.getFieldsetProps = helpers.getFieldsetProps;
 exports.getFormProps = helpers.getFormProps;

package/index.mjs

@@ -1,6 +1,5 @@
-export { control, isFieldElement, requestSubmit } from '@conform-to/dom';
+export { parse } from '@conform-to/dom';
 export { FormProvider, FormStateInput } from './context.mjs';
 export { useField, useForm, useFormMetadata } from './hooks.mjs';
 export { useInputControl } from './integrations.mjs';
-export { validateConstraint } from './validitystate.mjs';
 export { getCollectionProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';

package/integrations.d.ts

@@ -7,9 +7,9 @@ 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(options: {
-    key?: string | undefined;
+export declare function useInputControl(meta: {
+    key?: string | null | undefined;
     name: string;
     formId: string;
-    initialValue: string | undefined;
+    initialValue?: string | undefined;
 }): InputControl;

package/integrations.js

@@ -32,22 +32,22 @@ function getEventTarget(formId, name) {
   form === null || form === void 0 || form.appendChild(input);
   return input;
 }
-function useInputControl(options) {
+function useInputControl(meta) {
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = react.useState(options.key);
-  var [value, setValue] = react.useState(() => options.initialValue);
-  if (key !== options.key) {
-    setValue(options.initialValue);
-    setKey(options.key);
+  var [key, setKey] = react.useState(meta.key);
+  var [value, setValue] = react.useState(() => meta.initialValue);
+  if (key !== meta.key) {
+    setValue(meta.initialValue);
+    setKey(meta.key);
   }
   react.useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(options.formId, options.name, element => element === event.target);
+        var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
         if (element) {
           eventDispatched.current[listener] = true;
         }
@@ -64,12 +64,12 @@ function useInputControl(options) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.name]);
   var handlers = react.useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(options.formId, options.name);
+          var _element = getEventTarget(meta.formId, meta.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(options) {
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(options.formId, options.name);
+          var _element2 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -125,7 +125,7 @@ function useInputControl(options) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(options.formId, options.name);
+          var _element3 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -135,7 +135,7 @@ function useInputControl(options) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.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(options) {
+function useInputControl(meta) {
   var eventDispatched = useRef({
     change: false,
     focus: false,
     blur: false
   });
-  var [key, setKey] = useState(options.key);
-  var [value, setValue] = useState(() => options.initialValue);
-  if (key !== options.key) {
-    setValue(options.initialValue);
-    setKey(options.key);
+  var [key, setKey] = useState(meta.key);
+  var [value, setValue] = useState(() => meta.initialValue);
+  if (key !== meta.key) {
+    setValue(meta.initialValue);
+    setKey(meta.key);
   }
   useEffect(() => {
     var createEventListener = listener => {
       return event => {
-        var element = getFieldElement(options.formId, options.name, element => element === event.target);
+        var element = getFieldElement(meta.formId, meta.name, element => element === event.target);
         if (element) {
           eventDispatched.current[listener] = true;
         }
@@ -60,12 +60,12 @@ function useInputControl(options) {
       document.removeEventListener('focusin', focusHandler, true);
       document.removeEventListener('focusout', blurHandler, true);
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.name]);
   var handlers = useMemo(() => {
     return {
       change(value) {
         if (!eventDispatched.current.change) {
-          var _element = getEventTarget(options.formId, options.name);
+          var _element = getEventTarget(meta.formId, meta.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(options) {
       },
       focus() {
         if (!eventDispatched.current.focus) {
-          var _element2 = getEventTarget(options.formId, options.name);
+          var _element2 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.focus = true;
           _element2.dispatchEvent(new FocusEvent('focusin', {
             bubbles: true
@@ -121,7 +121,7 @@ function useInputControl(options) {
       },
       blur() {
         if (!eventDispatched.current.blur) {
-          var _element3 = getEventTarget(options.formId, options.name);
+          var _element3 = getEventTarget(meta.formId, meta.name);
           eventDispatched.current.blur = true;
           _element3.dispatchEvent(new FocusEvent('focusout', {
             bubbles: true
@@ -131,7 +131,7 @@ function useInputControl(options) {
         eventDispatched.current.blur = false;
       }
     };
-  }, [options.formId, options.name]);
+  }, [meta.formId, meta.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.5",
+	"version": "1.0.0-pre.7",
 	"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.5"
+		"@conform-to/dom": "1.0.0-pre.7"
 	},
 	"devDependencies": {
 		"@types/react": "^18.2.43",