@conform-to/react 0.9.1 → 1.0.0-pre.1

package/index.d.ts

@@ -1,3 +1,6 @@
-export { type FieldsetConstraint, type Submission, parse, list, validate, requestIntent, isFieldElement, } from '@conform-to/dom';
-export { type Fieldset, type FieldConfig, type FieldsetConfig, type FormConfig, useForm, useFieldset, useFieldList, useInputEvent, validateConstraint, } from './hooks.js';
-export * as conform from './helpers.js';
+export { type Submission, type SubmissionResult, type Intent, type FormId, type FieldName, requestIntent, requestSubmit, isFieldElement, intent, } from '@conform-to/dom';
+export { type FieldProps, 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, getControlButtonProps, } from './helpers';

package/index.js

@@ -3,34 +3,41 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 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, 'isFieldElement', {
-	enumerable: true,
-	get: function () { return dom.isFieldElement; }
-});
-Object.defineProperty(exports, 'list', {
+Object.defineProperty(exports, 'intent', {
 	enumerable: true,
-	get: function () { return dom.list; }
+	get: function () { return dom.intent; }
 });
-Object.defineProperty(exports, 'parse', {
+Object.defineProperty(exports, 'isFieldElement', {
 	enumerable: true,
-	get: function () { return dom.parse; }
+	get: function () { return dom.isFieldElement; }
 });
 Object.defineProperty(exports, 'requestIntent', {
 	enumerable: true,
 	get: function () { return dom.requestIntent; }
 });
-Object.defineProperty(exports, 'validate', {
+Object.defineProperty(exports, 'requestSubmit', {
 	enumerable: true,
-	get: function () { return dom.validate; }
+	get: function () { return dom.requestSubmit; }
 });
-exports.useFieldList = hooks.useFieldList;
-exports.useFieldset = hooks.useFieldset;
+exports.FormProvider = context.FormProvider;
+exports.FormStateInput = context.FormStateInput;
+exports.useField = hooks.useField;
 exports.useForm = hooks.useForm;
-exports.useInputEvent = hooks.useInputEvent;
-exports.validateConstraint = hooks.validateConstraint;
-exports.conform = helpers;
+exports.useFormMetadata = hooks.useFormMetadata;
+exports.useInputControl = integrations.useInputControl;
+exports.validateConstraint = validitystate.validateConstraint;
+exports.getCollectionProps = helpers.getCollectionProps;
+exports.getControlButtonProps = helpers.getControlButtonProps;
+exports.getFieldsetProps = helpers.getFieldsetProps;
+exports.getFormProps = helpers.getFormProps;
+exports.getInputProps = helpers.getInputProps;
+exports.getSelectProps = helpers.getSelectProps;
+exports.getTextareaProps = helpers.getTextareaProps;

package/index.mjs

@@ -1,4 +1,6 @@
-export { isFieldElement, list, parse, requestIntent, validate } from '@conform-to/dom';
-export { useFieldList, useFieldset, useForm, useInputEvent, validateConstraint } from './hooks.mjs';
-import * as helpers from './helpers.mjs';
-export { helpers as conform };
+export { intent, isFieldElement, requestIntent, requestSubmit } 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, getControlButtonProps, getFieldsetProps, getFormProps, getInputProps, getSelectProps, getTextareaProps } from './helpers.mjs';

package/integrations.d.ts

@@ -0,0 +1,18 @@
+import { type FieldElement, type FormValue } from '@conform-to/dom';
+import { type FieldMetadata } from './context';
+export type InputControl<Value> = {
+    value: Value;
+    change: (value: Value) => void;
+    focus: () => void;
+    blur: () => void;
+};
+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<Schema>(metadata: FieldMetadata<Schema, any, any>, options?: {
+    onFocus?: (event: Event) => void;
+}): InputControl<string | undefined>;
+export declare function useInputControl<Schema, Value>(metadata: FieldMetadata<Schema, any, any>, options: {
+    initialize: (value: FormValue<Schema> | undefined) => Value;
+    serialize?: (value: Value) => string;
+    onFocus?: (event: Event) => void;
+}): InputControl<Value>;

package/integrations.js

@@ -0,0 +1,161 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var dom = require('@conform-to/dom');
+var react = require('react');
+
+function getFieldElement(formId, name) {
+  var _document$forms$named;
+  var match = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => true;
+  var element = (_document$forms$named = document.forms.namedItem(formId)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.elements.namedItem(name);
+  if (element) {
+    var items = element instanceof Element ? [element] : Array.from(element.values());
+    for (var item of items) {
+      if (dom.isFieldElement(item) && match(item)) {
+        return item;
+      }
+    }
+  }
+  return null;
+}
+function getEventTarget(formId, name) {
+  var element = getFieldElement(formId, name);
+  if (element) {
+    return element;
+  }
+  var form = document.forms.namedItem(formId);
+  var input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = name;
+  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  return input;
+}
+function useInputControl(metadata, options) {
+  var _options$initialize;
+  var eventDispatched = react.useRef({
+    change: false,
+    focus: false,
+    blur: false
+  });
+  var [key, setKey] = react.useState(metadata.key);
+  var optionsRef = react.useRef(options);
+  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : value => value === null || value === void 0 ? void 0 : value.toString();
+  var [value, setValue] = react.useState(() => initialize(metadata.initialValue));
+  if (key !== metadata.key) {
+    setValue(initialize(metadata.initialValue));
+    setKey(metadata.key);
+  }
+  react.useEffect(() => {
+    optionsRef.current = options;
+  });
+  react.useEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        if (element) {
+          if (listener === 'focus') {
+            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);
+          }
+          eventDispatched.current[listener] = true;
+        }
+      };
+    };
+    var inputHandler = createEventListener('change');
+    var focusHandler = createEventListener('focus');
+    var blurHandler = createEventListener('blur');
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focusin', focusHandler, true);
+    document.addEventListener('focusout', blurHandler, true);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focusin', focusHandler, true);
+      document.removeEventListener('focusout', blurHandler, true);
+    };
+  }, [metadata.formId, metadata.name]);
+  var handlers = react.useMemo(() => {
+    return {
+      change(value) {
+        if (!eventDispatched.current.change) {
+          var _ref, _optionsRef$current$s, _optionsRef$current2, _optionsRef$current2$;
+          var _element = getEventTarget(metadata.formId, metadata.name);
+          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 || (_optionsRef$current2$ = _optionsRef$current2.serialize) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          eventDispatched.current.change = true;
+          if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
+            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
+              _element.click();
+            }
+          } else {
+            // No change event will be triggered on React if `element.value` is already updated
+            if (_element.value !== serializedValue) {
+              /**
+               * Triggering react custom change event
+               * Solution based on dom-testing-library
+               * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+               * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+               */
+              var {
+                set: valueSetter
+              } = Object.getOwnPropertyDescriptor(_element, 'value') || {};
+              var prototype = Object.getPrototypeOf(_element);
+              var {
+                set: prototypeValueSetter
+              } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+              if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+                prototypeValueSetter.call(_element, value);
+              } else {
+                if (valueSetter) {
+                  valueSetter.call(_element, value);
+                } else {
+                  throw new Error('The given element does not have a value setter');
+                }
+              }
+            }
+
+            // Dispatch input event with the updated input value
+            _element.dispatchEvent(new InputEvent('input', {
+              bubbles: true
+            }));
+            // Dispatch change event (necessary for select to update the selected option)
+            _element.dispatchEvent(new Event('change', {
+              bubbles: true
+            }));
+          }
+        }
+        setValue(value);
+        eventDispatched.current.change = false;
+      },
+      focus() {
+        if (!eventDispatched.current.focus) {
+          var _element2 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.focus = true;
+          _element2.dispatchEvent(new FocusEvent('focusin', {
+            bubbles: true
+          }));
+          _element2.dispatchEvent(new FocusEvent('focus'));
+        }
+        eventDispatched.current.focus = false;
+      },
+      blur() {
+        if (!eventDispatched.current.blur) {
+          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.blur = true;
+          _element3.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true
+          }));
+          _element3.dispatchEvent(new FocusEvent('blur'));
+        }
+        eventDispatched.current.blur = false;
+      }
+    };
+  }, [metadata.formId, metadata.name]);
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, handlers), {}, {
+    value
+  });
+}
+
+exports.getEventTarget = getEventTarget;
+exports.getFieldElement = getFieldElement;
+exports.useInputControl = useInputControl;

package/integrations.mjs

@@ -0,0 +1,155 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { isFieldElement } from '@conform-to/dom';
+import { useRef, useState, useEffect, useMemo } from 'react';
+
+function getFieldElement(formId, name) {
+  var _document$forms$named;
+  var match = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : () => true;
+  var element = (_document$forms$named = document.forms.namedItem(formId)) === null || _document$forms$named === void 0 ? void 0 : _document$forms$named.elements.namedItem(name);
+  if (element) {
+    var items = element instanceof Element ? [element] : Array.from(element.values());
+    for (var item of items) {
+      if (isFieldElement(item) && match(item)) {
+        return item;
+      }
+    }
+  }
+  return null;
+}
+function getEventTarget(formId, name) {
+  var element = getFieldElement(formId, name);
+  if (element) {
+    return element;
+  }
+  var form = document.forms.namedItem(formId);
+  var input = document.createElement('input');
+  input.type = 'hidden';
+  input.name = name;
+  form === null || form === void 0 ? void 0 : form.appendChild(input);
+  return input;
+}
+function useInputControl(metadata, options) {
+  var _options$initialize;
+  var eventDispatched = useRef({
+    change: false,
+    focus: false,
+    blur: false
+  });
+  var [key, setKey] = useState(metadata.key);
+  var optionsRef = useRef(options);
+  var initialize = (_options$initialize = options === null || options === void 0 ? void 0 : options.initialize) !== null && _options$initialize !== void 0 ? _options$initialize : value => value === null || value === void 0 ? void 0 : value.toString();
+  var [value, setValue] = useState(() => initialize(metadata.initialValue));
+  if (key !== metadata.key) {
+    setValue(initialize(metadata.initialValue));
+    setKey(metadata.key);
+  }
+  useEffect(() => {
+    optionsRef.current = options;
+  });
+  useEffect(() => {
+    var createEventListener = listener => {
+      return event => {
+        var element = getFieldElement(metadata.formId, metadata.name, element => element === event.target);
+        if (element) {
+          if (listener === 'focus') {
+            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);
+          }
+          eventDispatched.current[listener] = true;
+        }
+      };
+    };
+    var inputHandler = createEventListener('change');
+    var focusHandler = createEventListener('focus');
+    var blurHandler = createEventListener('blur');
+    document.addEventListener('input', inputHandler, true);
+    document.addEventListener('focusin', focusHandler, true);
+    document.addEventListener('focusout', blurHandler, true);
+    return () => {
+      document.removeEventListener('input', inputHandler, true);
+      document.removeEventListener('focusin', focusHandler, true);
+      document.removeEventListener('focusout', blurHandler, true);
+    };
+  }, [metadata.formId, metadata.name]);
+  var handlers = useMemo(() => {
+    return {
+      change(value) {
+        if (!eventDispatched.current.change) {
+          var _ref, _optionsRef$current$s, _optionsRef$current2, _optionsRef$current2$;
+          var _element = getEventTarget(metadata.formId, metadata.name);
+          var serializedValue = (_ref = (_optionsRef$current$s = (_optionsRef$current2 = optionsRef.current) === null || _optionsRef$current2 === void 0 || (_optionsRef$current2$ = _optionsRef$current2.serialize) === null || _optionsRef$current2$ === void 0 ? void 0 : _optionsRef$current2$.call(_optionsRef$current2, value)) !== null && _optionsRef$current$s !== void 0 ? _optionsRef$current$s : value === null || value === void 0 ? void 0 : value.toString()) !== null && _ref !== void 0 ? _ref : '';
+          eventDispatched.current.change = true;
+          if (_element instanceof HTMLInputElement && (_element.type === 'checkbox' || _element.type === 'radio')) {
+            if (_element.checked ? _element.value !== serializedValue : _element.value === serializedValue) {
+              _element.click();
+            }
+          } else {
+            // No change event will be triggered on React if `element.value` is already updated
+            if (_element.value !== serializedValue) {
+              /**
+               * Triggering react custom change event
+               * Solution based on dom-testing-library
+               * @see https://github.com/facebook/react/issues/10135#issuecomment-401496776
+               * @see https://github.com/testing-library/dom-testing-library/blob/main/src/events.js#L104-L123
+               */
+              var {
+                set: valueSetter
+              } = Object.getOwnPropertyDescriptor(_element, 'value') || {};
+              var prototype = Object.getPrototypeOf(_element);
+              var {
+                set: prototypeValueSetter
+              } = Object.getOwnPropertyDescriptor(prototype, 'value') || {};
+              if (prototypeValueSetter && valueSetter !== prototypeValueSetter) {
+                prototypeValueSetter.call(_element, value);
+              } else {
+                if (valueSetter) {
+                  valueSetter.call(_element, value);
+                } else {
+                  throw new Error('The given element does not have a value setter');
+                }
+              }
+            }
+
+            // Dispatch input event with the updated input value
+            _element.dispatchEvent(new InputEvent('input', {
+              bubbles: true
+            }));
+            // Dispatch change event (necessary for select to update the selected option)
+            _element.dispatchEvent(new Event('change', {
+              bubbles: true
+            }));
+          }
+        }
+        setValue(value);
+        eventDispatched.current.change = false;
+      },
+      focus() {
+        if (!eventDispatched.current.focus) {
+          var _element2 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.focus = true;
+          _element2.dispatchEvent(new FocusEvent('focusin', {
+            bubbles: true
+          }));
+          _element2.dispatchEvent(new FocusEvent('focus'));
+        }
+        eventDispatched.current.focus = false;
+      },
+      blur() {
+        if (!eventDispatched.current.blur) {
+          var _element3 = getEventTarget(metadata.formId, metadata.name);
+          eventDispatched.current.blur = true;
+          _element3.dispatchEvent(new FocusEvent('focusout', {
+            bubbles: true
+          }));
+          _element3.dispatchEvent(new FocusEvent('blur'));
+        }
+        eventDispatched.current.blur = false;
+      }
+    };
+  }, [metadata.formId, metadata.name]);
+  return _objectSpread2(_objectSpread2({}, handlers), {}, {
+    value
+  });
+}
+
+export { getEventTarget, getFieldElement, useInputControl };

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Conform view adapter for react",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "0.9.1",
+	"version": "1.0.0-pre.1",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",
@@ -30,10 +30,10 @@
 		"url": "https://github.com/edmundhung/conform/issues"
 	},
 	"dependencies": {
-		"@conform-to/dom": "0.9.1"
+		"@conform-to/dom": "1.0.0-pre.1"
 	},
 	"peerDependencies": {
-		"react": ">=16.8"
+		"react": ">=18"
 	},
 	"keywords": [
 		"constraint-validation",

package/validitystate.d.ts

@@ -0,0 +1,12 @@
+import { type Submission } from '@conform-to/dom';
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+export declare function validateConstraint(options: {
+    form: HTMLFormElement;
+    formData?: FormData;
+}): Submission<Record<string, any>, {
+    validity: ValidityState;
+    validationMessage: string;
+}>;

package/validitystate.js

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+var dom = require('@conform-to/dom');
+
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+function validateConstraint(options) {
+  var _options$formData;
+  var formData = (_options$formData = options === null || options === void 0 ? void 0 : options.formData) !== null && _options$formData !== void 0 ? _options$formData : new FormData(options.form);
+  return dom.parse(formData, {
+    resolve(value) {
+      var error = {};
+      for (var element of options.form.elements) {
+        if (dom.isFieldElement(element) && element.name !== '' && !element.validity.valid) {
+          error[element.name] = {
+            validity: _rollupPluginBabelHelpers.objectSpread2({}, element.validity),
+            validationMessage: element.validationMessage
+          };
+        }
+      }
+      if (Object.entries(error).length > 0) {
+        return {
+          error
+        };
+      }
+      return {
+        value
+      };
+    }
+  });
+}
+
+exports.validateConstraint = validateConstraint;

package/validitystate.mjs

@@ -0,0 +1,34 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
+import { parse, isFieldElement } from '@conform-to/dom';
+
+/**
+ * Validate the form with the Constraint Validation API
+ * @see https://conform.guide/api/react#validateconstraint
+ */
+function validateConstraint(options) {
+  var _options$formData;
+  var formData = (_options$formData = options === null || options === void 0 ? void 0 : options.formData) !== null && _options$formData !== void 0 ? _options$formData : new FormData(options.form);
+  return parse(formData, {
+    resolve(value) {
+      var error = {};
+      for (var element of options.form.elements) {
+        if (isFieldElement(element) && element.name !== '' && !element.validity.valid) {
+          error[element.name] = {
+            validity: _objectSpread2({}, element.validity),
+            validationMessage: element.validationMessage
+          };
+        }
+      }
+      if (Object.entries(error).length > 0) {
+        return {
+          error
+        };
+      }
+      return {
+        value
+      };
+    }
+  });
+}
+
+export { validateConstraint };