@conform-to/react 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Edmund Hung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# @conform-to/react
+
+> View adapter for [react](https://github.com/facebook/react), built on top of `@conform-to/dom`
+
+## API Reference
+
+- [conform](#conform)
+- [useControlledInput](#useControlledInput)
+- [useForm](#useForm)
+- [useFieldset](#useFieldset)
+- [useFieldList](#useFieldList)
+
+### conform
+
+### useControlledInput
+
+### useForm
+
+### useFieldset
+
+### useFieldList

package/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  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);
+  }
+
+  return keys;
+}
+
+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));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+exports.defineProperty = _defineProperty;
+exports.objectSpread2 = _objectSpread2;

package/helpers.d.ts

@@ -0,0 +1,8 @@
+import { type FieldConfig } from '@conform-to/dom';
+import { type InputHTMLAttributes, type SelectHTMLAttributes, type TextareaHTMLAttributes } from 'react';
+export declare function input<Type extends string | number | Date | undefined>(config: FieldConfig<Type>, { type, value }?: {
+    type?: string;
+    value?: string;
+}): InputHTMLAttributes<HTMLInputElement>;
+export declare function select<T extends any>(config: FieldConfig<T>): SelectHTMLAttributes<HTMLSelectElement>;
+export declare function textarea<T extends string | undefined>(config: FieldConfig<T>): TextareaHTMLAttributes<HTMLTextAreaElement>;

package/helpers.js

@@ -0,0 +1,55 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function input(config) {
+  var _config$initialValue, _config$constraint, _config$constraint2, _config$constraint3, _config$constraint4, _config$constraint5, _config$constraint6, _config$constraint7;
+
+  var {
+    type,
+    value
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  return {
+    type,
+    name: config.name,
+    form: config.form,
+    value: isCheckboxOrRadio ? value : undefined,
+    defaultValue: !isCheckboxOrRadio ? "".concat((_config$initialValue = config.initialValue) !== null && _config$initialValue !== void 0 ? _config$initialValue : '') : undefined,
+    defaultChecked: isCheckboxOrRadio ? config.initialValue === value : undefined,
+    required: (_config$constraint = config.constraint) === null || _config$constraint === void 0 ? void 0 : _config$constraint.required,
+    minLength: (_config$constraint2 = config.constraint) === null || _config$constraint2 === void 0 ? void 0 : _config$constraint2.minLength,
+    maxLength: (_config$constraint3 = config.constraint) === null || _config$constraint3 === void 0 ? void 0 : _config$constraint3.maxLength,
+    min: (_config$constraint4 = config.constraint) === null || _config$constraint4 === void 0 ? void 0 : _config$constraint4.min,
+    max: (_config$constraint5 = config.constraint) === null || _config$constraint5 === void 0 ? void 0 : _config$constraint5.max,
+    step: (_config$constraint6 = config.constraint) === null || _config$constraint6 === void 0 ? void 0 : _config$constraint6.step,
+    pattern: (_config$constraint7 = config.constraint) === null || _config$constraint7 === void 0 ? void 0 : _config$constraint7.pattern
+  };
+}
+function select(config) {
+  var _config$initialValue2, _config$constraint8, _config$constraint9;
+
+  return {
+    name: config.name,
+    form: config.form,
+    defaultValue: "".concat((_config$initialValue2 = config.initialValue) !== null && _config$initialValue2 !== void 0 ? _config$initialValue2 : ''),
+    required: (_config$constraint8 = config.constraint) === null || _config$constraint8 === void 0 ? void 0 : _config$constraint8.required,
+    multiple: (_config$constraint9 = config.constraint) === null || _config$constraint9 === void 0 ? void 0 : _config$constraint9.multiple
+  };
+}
+function textarea(config) {
+  var _config$initialValue3, _config$constraint10, _config$constraint11, _config$constraint12;
+
+  return {
+    name: config.name,
+    form: config.form,
+    defaultValue: "".concat((_config$initialValue3 = config.initialValue) !== null && _config$initialValue3 !== void 0 ? _config$initialValue3 : ''),
+    required: (_config$constraint10 = config.constraint) === null || _config$constraint10 === void 0 ? void 0 : _config$constraint10.required,
+    minLength: (_config$constraint11 = config.constraint) === null || _config$constraint11 === void 0 ? void 0 : _config$constraint11.minLength,
+    maxLength: (_config$constraint12 = config.constraint) === null || _config$constraint12 === void 0 ? void 0 : _config$constraint12.maxLength
+  };
+}
+
+exports.input = input;
+exports.select = select;
+exports.textarea = textarea;

package/hooks.d.ts

@@ -0,0 +1,64 @@
+import { type FieldConfig, type Schema } from '@conform-to/dom';
+import { type ButtonHTMLAttributes, type FormEventHandler, type FormHTMLAttributes, type RefObject, type ReactElement } from 'react';
+interface FormConfig {
+    /**
+     * Decide when the error should be reported initially.
+     * Default to `onSubmit`
+     */
+    initialReport?: 'onSubmit' | 'onChange' | 'onBlur';
+    /**
+     * Native browser report will be used before hydation if it is set to `true`.
+     * Default to `false`
+     */
+    fallbackNative?: boolean;
+    /**
+     * The form could be submitted even if there is invalid input control if it is set to `true`.
+     * Default to `false`
+     */
+    noValidate?: boolean;
+    /**
+     * The submit handler will be triggered only when the form is valid.
+     * Or when noValidate is set to `true`
+     */
+    onSubmit?: FormHTMLAttributes<HTMLFormElement>['onSubmit'];
+    onReset?: FormHTMLAttributes<HTMLFormElement>['onReset'];
+}
+interface FormProps {
+    ref: RefObject<HTMLFormElement>;
+    onSubmit: Required<FormHTMLAttributes<HTMLFormElement>>['onSubmit'];
+    onReset: Required<FormHTMLAttributes<HTMLFormElement>>['onReset'];
+    noValidate: Required<FormHTMLAttributes<HTMLFormElement>>['noValidate'];
+}
+export declare function useForm({ onReset, onSubmit, noValidate, fallbackNative, initialReport, }?: FormConfig): FormProps;
+interface FieldsetConfig<Type> extends Partial<FieldConfig<Type>> {
+}
+interface FieldsetProps {
+    ref: RefObject<HTMLFieldSetElement>;
+    name?: string;
+    form?: string;
+    onInput: FormEventHandler<HTMLFieldSetElement>;
+    onReset: FormEventHandler<HTMLFieldSetElement>;
+    onInvalid: FormEventHandler<HTMLFieldSetElement>;
+}
+export declare function useFieldset<Type extends Record<string, any>>(schema: Schema<Type>, config?: FieldsetConfig<Type>): [FieldsetProps, {
+    [Key in keyof Type]-?: FieldConfig<Type[Key]>;
+}];
+interface FieldListControl {
+    prepend(): ButtonHTMLAttributes<HTMLButtonElement>;
+    append(): ButtonHTMLAttributes<HTMLButtonElement>;
+    remove(index: number): ButtonHTMLAttributes<HTMLButtonElement>;
+}
+export declare function useFieldList<Type extends Array<any>>(config: FieldConfig<Type>): [
+    Array<{
+        key: string;
+        config: FieldConfig<Type extends Array<infer InnerType> ? InnerType : never>;
+    }>,
+    FieldListControl
+];
+interface InputControl {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur: () => void;
+}
+export declare function useControlledInput<T extends string | number | Date | undefined>(field: FieldConfig<T>): [ReactElement, InputControl];
+export {};

package/hooks.js

@@ -0,0 +1,383 @@
+'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 useForm() {
+  var {
+    onReset,
+    onSubmit,
+    noValidate = false,
+    fallbackNative = false,
+    initialReport = 'onSubmit'
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = react.useRef(null);
+  var [formNoValidate, setFormNoValidate] = react.useState(noValidate || !fallbackNative);
+
+  var handleSubmit = event => {
+    if (!noValidate) {
+      dom.setFieldState(event.currentTarget, {
+        touched: true
+      });
+
+      if (!dom.shouldSkipValidate(event.nativeEvent) && !event.currentTarget.reportValidity()) {
+        return event.preventDefault();
+      }
+    }
+
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
+  };
+
+  var handleReset = event => {
+    dom.setFieldState(event.currentTarget, {
+      touched: false
+    });
+    onReset === null || onReset === void 0 ? void 0 : onReset(event);
+  };
+
+  react.useEffect(() => {
+    setFormNoValidate(true);
+  }, []);
+  react.useEffect(() => {
+    if (noValidate) {
+      return;
+    }
+
+    var handleChange = event => {
+      var _event$target;
+
+      if (!dom.isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
+        return;
+      }
+
+      if (initialReport === 'onChange') {
+        dom.setFieldState(event.target, {
+          touched: true
+        });
+      }
+
+      if (ref.current) {
+        dom.reportValidity(ref.current);
+      }
+    };
+
+    var handleBlur = event => {
+      var _event$target2;
+
+      if (!dom.isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
+        return;
+      }
+
+      if (initialReport === 'onBlur') {
+        dom.setFieldState(event.target, {
+          touched: true
+        });
+      }
+
+      if (ref.current) {
+        dom.reportValidity(ref.current);
+      }
+    };
+
+    document.body.addEventListener('input', handleChange);
+    document.body.addEventListener('focusout', handleBlur);
+    return () => {
+      document.body.removeEventListener('input', handleChange);
+      document.body.removeEventListener('focusout', handleBlur);
+    };
+  }, [noValidate, initialReport]);
+  return {
+    ref,
+    onSubmit: handleSubmit,
+    onReset: handleReset,
+    noValidate: formNoValidate
+  };
+}
+function useFieldset(schema) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var ref = react.useRef(null);
+  var [errorMessage, dispatch] = react.useReducer((state, action) => {
+    switch (action.type) {
+      case 'report':
+        {
+          var {
+            key,
+            message
+          } = action.payload;
+
+          if (state[key] === message) {
+            return state;
+          }
+
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), {}, {
+            [key]: message
+          });
+        }
+
+      case 'migrate':
+        {
+          var {
+            keys,
+            error
+          } = action.payload;
+          var nextState = state;
+
+          for (var _key of Object.keys(keys)) {
+            var prevError = state[_key];
+            var nextError = error === null || error === void 0 ? void 0 : error[_key];
+
+            if (typeof nextError === 'string' && prevError !== nextError) {
+              return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, nextState), {}, {
+                [_key]: nextError
+              });
+            }
+          }
+
+          return nextState;
+        }
+
+      case 'cleanup':
+        {
+          var {
+            fieldset
+          } = action.payload;
+          var updates = [];
+
+          for (var [_key2, _message] of Object.entries(state)) {
+            if (!_message) {
+              continue;
+            }
+
+            var fields = dom.getFieldElements(fieldset, _key2);
+
+            if (fields.every(field => field.validity.valid)) {
+              updates.push([_key2, '']);
+            }
+          }
+
+          if (updates.length === 0) {
+            return state;
+          }
+
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state), Object.fromEntries(updates));
+        }
+
+      case 'reset':
+        {
+          return {};
+        }
+    }
+  }, {}, () => Object.fromEntries(Object.keys(schema.fields).reduce((result, name) => {
+    var _config$error;
+
+    var error = (_config$error = config.error) === null || _config$error === void 0 ? void 0 : _config$error[name];
+
+    if (typeof error === 'string') {
+      result.push([name, error]);
+    }
+
+    return result;
+  }, [])));
+  react.useEffect(() => {
+    var _schema$validate;
+
+    var fieldset = ref.current;
+
+    if (!fieldset) {
+      console.warn('No fieldset ref found; You must pass the fieldsetProps to the fieldset element');
+      return;
+    }
+
+    if (!(fieldset !== null && fieldset !== void 0 && fieldset.form)) {
+      console.warn('No form element is linked to the fieldset; Do you forgot setting the form attribute?');
+    }
+
+    (_schema$validate = schema.validate) === null || _schema$validate === void 0 ? void 0 : _schema$validate.call(schema, fieldset);
+    dispatch({
+      type: 'cleanup',
+      payload: {
+        fieldset
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [schema.validate]);
+  react.useEffect(() => {
+    dispatch({
+      type: 'migrate',
+      payload: {
+        keys: Object.keys(schema.fields),
+        error: config.error
+      }
+    });
+  }, [config.error, schema.fields]);
+  return [{
+    ref,
+    name: config.name,
+    form: config.form,
+
+    onInput(e) {
+      var _schema$validate2;
+
+      var fieldset = e.currentTarget;
+      (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      dispatch({
+        type: 'cleanup',
+        payload: {
+          fieldset
+        }
+      });
+    },
+
+    onReset(e) {
+      dom.setFieldState(e.currentTarget, {
+        touched: false
+      });
+      dispatch({
+        type: 'reset'
+      });
+    },
+
+    onInvalid(e) {
+      var element = dom.isFieldElement(e.target) ? e.target : null;
+      var key = Object.keys(schema.fields).find(key => (element === null || element === void 0 ? void 0 : element.name) === dom.getName([e.currentTarget.name, key]));
+
+      if (!element || !key) {
+        return;
+      } // Disable browser report
+
+
+      e.preventDefault();
+      dispatch({
+        type: 'report',
+        payload: {
+          key,
+          message: element.validationMessage
+        }
+      });
+    }
+
+  }, dom.createFieldConfig(schema, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
+    error: Object.assign({}, config.error, errorMessage)
+  }))];
+}
+function useFieldList(config) {
+  var _config$initialValue$, _config$initialValue;
+
+  var size = (_config$initialValue$ = (_config$initialValue = config.initialValue) === null || _config$initialValue === void 0 ? void 0 : _config$initialValue.length) !== null && _config$initialValue$ !== void 0 ? _config$initialValue$ : 1;
+  var [keys, setKeys] = react.useState(() => [...Array(size).keys()]);
+  var list = react.useMemo(() => keys.map((key, index) => {
+    var _config$initialValue2, _config$error2;
+
+    return {
+      key: "".concat(key),
+      config: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config), {}, {
+        name: "".concat(config.name, "[").concat(index, "]"),
+        initialValue: (_config$initialValue2 = config.initialValue) === null || _config$initialValue2 === void 0 ? void 0 : _config$initialValue2[index],
+        error: (_config$error2 = config.error) === null || _config$error2 === void 0 ? void 0 : _config$error2[index],
+        // @ts-expect-error
+        constraint: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, config.constraint), {}, {
+          multiple: false
+        })
+      })
+    };
+  }), [keys, config]);
+  var controls = {
+    prepend() {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'prepend', {})), {}, {
+        onClick(e) {
+          setKeys(keys => [Date.now(), ...keys]);
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    append() {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'append', {})), {}, {
+        onClick(e) {
+          setKeys(keys => [...keys, Date.now()]);
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    remove(index) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, dom.createControlButton(config.name, 'remove', {
+        index
+      })), {}, {
+        onClick(e) {
+          setKeys(keys => [...keys.slice(0, index), ...keys.slice(index + 1)]);
+          e.preventDefault();
+        }
+
+      });
+    }
+
+  };
+  react.useEffect(() => {
+    setKeys(keys => {
+      if (keys.length === size) {
+        return keys;
+      }
+
+      return [...Array(size).keys()];
+    });
+  }, [size]);
+  return [list, controls];
+}
+function useControlledInput(field) {
+  var _field$initialValue;
+
+  var [value, setValue] = react.useState("".concat((_field$initialValue = field.initialValue) !== null && _field$initialValue !== void 0 ? _field$initialValue : ''));
+  var [shouldBlur, setShouldBlur] = react.useState(false);
+  var ref = react.useRef(null);
+  var input = react.useMemo(() => /*#__PURE__*/react.createElement('input', _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, field.constraint), {}, {
+    ref,
+    name: field.name,
+    defaultValue: field.initialValue,
+    style: {
+      display: 'none'
+    },
+    'aria-hidden': true
+  })), [field.constraint, field.name, field.initialValue]);
+  react.useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    ref.current.value = value;
+    ref.current.dispatchEvent(new InputEvent('input', {
+      bubbles: true
+    }));
+  }, [value]);
+  react.useEffect(() => {
+    var _ref$current;
+
+    if (!shouldBlur) {
+      return;
+    }
+
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('focusout', {
+      bubbles: true
+    }));
+    setShouldBlur(false);
+  }, [shouldBlur]);
+  return [input, {
+    value,
+    onChange: value => {
+      setValue(value);
+    },
+    onBlur: () => {
+      setShouldBlur(true);
+    }
+  }];
+}
+
+exports.useControlledInput = useControlledInput;
+exports.useFieldList = useFieldList;
+exports.useFieldset = useFieldset;
+exports.useForm = useForm;

package/index.d.ts

@@ -0,0 +1,3 @@
+export { type FieldConfig, type Schema, parse, getFieldElements, } from '@conform-to/dom';
+export * from './hooks';
+export * as conform from './helpers';

package/index.js

@@ -0,0 +1,23 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var dom = require('@conform-to/dom');
+var hooks = require('./hooks.js');
+var helpers = require('./helpers.js');
+
+
+
+Object.defineProperty(exports, 'getFieldElements', {
+	enumerable: true,
+	get: function () { return dom.getFieldElements; }
+});
+Object.defineProperty(exports, 'parse', {
+	enumerable: true,
+	get: function () { return dom.parse; }
+});
+exports.useControlledInput = hooks.useControlledInput;
+exports.useFieldList = hooks.useFieldList;
+exports.useFieldset = hooks.useFieldset;
+exports.useForm = hooks.useForm;
+exports.conform = helpers;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,42 @@
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  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);
+  }
+
+  return keys;
+}
+
+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));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };

package/module/helpers.js

@@ -0,0 +1,49 @@
+function input(config) {
+  var _config$initialValue, _config$constraint, _config$constraint2, _config$constraint3, _config$constraint4, _config$constraint5, _config$constraint6, _config$constraint7;
+
+  var {
+    type,
+    value
+  } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var isCheckboxOrRadio = type === 'checkbox' || type === 'radio';
+  return {
+    type,
+    name: config.name,
+    form: config.form,
+    value: isCheckboxOrRadio ? value : undefined,
+    defaultValue: !isCheckboxOrRadio ? "".concat((_config$initialValue = config.initialValue) !== null && _config$initialValue !== void 0 ? _config$initialValue : '') : undefined,
+    defaultChecked: isCheckboxOrRadio ? config.initialValue === value : undefined,
+    required: (_config$constraint = config.constraint) === null || _config$constraint === void 0 ? void 0 : _config$constraint.required,
+    minLength: (_config$constraint2 = config.constraint) === null || _config$constraint2 === void 0 ? void 0 : _config$constraint2.minLength,
+    maxLength: (_config$constraint3 = config.constraint) === null || _config$constraint3 === void 0 ? void 0 : _config$constraint3.maxLength,
+    min: (_config$constraint4 = config.constraint) === null || _config$constraint4 === void 0 ? void 0 : _config$constraint4.min,
+    max: (_config$constraint5 = config.constraint) === null || _config$constraint5 === void 0 ? void 0 : _config$constraint5.max,
+    step: (_config$constraint6 = config.constraint) === null || _config$constraint6 === void 0 ? void 0 : _config$constraint6.step,
+    pattern: (_config$constraint7 = config.constraint) === null || _config$constraint7 === void 0 ? void 0 : _config$constraint7.pattern
+  };
+}
+function select(config) {
+  var _config$initialValue2, _config$constraint8, _config$constraint9;
+
+  return {
+    name: config.name,
+    form: config.form,
+    defaultValue: "".concat((_config$initialValue2 = config.initialValue) !== null && _config$initialValue2 !== void 0 ? _config$initialValue2 : ''),
+    required: (_config$constraint8 = config.constraint) === null || _config$constraint8 === void 0 ? void 0 : _config$constraint8.required,
+    multiple: (_config$constraint9 = config.constraint) === null || _config$constraint9 === void 0 ? void 0 : _config$constraint9.multiple
+  };
+}
+function textarea(config) {
+  var _config$initialValue3, _config$constraint10, _config$constraint11, _config$constraint12;
+
+  return {
+    name: config.name,
+    form: config.form,
+    defaultValue: "".concat((_config$initialValue3 = config.initialValue) !== null && _config$initialValue3 !== void 0 ? _config$initialValue3 : ''),
+    required: (_config$constraint10 = config.constraint) === null || _config$constraint10 === void 0 ? void 0 : _config$constraint10.required,
+    minLength: (_config$constraint11 = config.constraint) === null || _config$constraint11 === void 0 ? void 0 : _config$constraint11.minLength,
+    maxLength: (_config$constraint12 = config.constraint) === null || _config$constraint12 === void 0 ? void 0 : _config$constraint12.maxLength
+  };
+}
+
+export { input, select, textarea };

package/module/hooks.js

@@ -0,0 +1,376 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+import { getFieldElements, setFieldState, isFieldElement, getName, createFieldConfig, shouldSkipValidate, reportValidity, createControlButton } from '@conform-to/dom';
+import { useRef, useState, useEffect, useReducer, useMemo, createElement } from 'react';
+
+function useForm() {
+  var {
+    onReset,
+    onSubmit,
+    noValidate = false,
+    fallbackNative = false,
+    initialReport = 'onSubmit'
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var ref = useRef(null);
+  var [formNoValidate, setFormNoValidate] = useState(noValidate || !fallbackNative);
+
+  var handleSubmit = event => {
+    if (!noValidate) {
+      setFieldState(event.currentTarget, {
+        touched: true
+      });
+
+      if (!shouldSkipValidate(event.nativeEvent) && !event.currentTarget.reportValidity()) {
+        return event.preventDefault();
+      }
+    }
+
+    onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit(event);
+  };
+
+  var handleReset = event => {
+    setFieldState(event.currentTarget, {
+      touched: false
+    });
+    onReset === null || onReset === void 0 ? void 0 : onReset(event);
+  };
+
+  useEffect(() => {
+    setFormNoValidate(true);
+  }, []);
+  useEffect(() => {
+    if (noValidate) {
+      return;
+    }
+
+    var handleChange = event => {
+      var _event$target;
+
+      if (!isFieldElement(event.target) || ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.form) !== ref.current) {
+        return;
+      }
+
+      if (initialReport === 'onChange') {
+        setFieldState(event.target, {
+          touched: true
+        });
+      }
+
+      if (ref.current) {
+        reportValidity(ref.current);
+      }
+    };
+
+    var handleBlur = event => {
+      var _event$target2;
+
+      if (!isFieldElement(event.target) || ((_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.form) !== ref.current) {
+        return;
+      }
+
+      if (initialReport === 'onBlur') {
+        setFieldState(event.target, {
+          touched: true
+        });
+      }
+
+      if (ref.current) {
+        reportValidity(ref.current);
+      }
+    };
+
+    document.body.addEventListener('input', handleChange);
+    document.body.addEventListener('focusout', handleBlur);
+    return () => {
+      document.body.removeEventListener('input', handleChange);
+      document.body.removeEventListener('focusout', handleBlur);
+    };
+  }, [noValidate, initialReport]);
+  return {
+    ref,
+    onSubmit: handleSubmit,
+    onReset: handleReset,
+    noValidate: formNoValidate
+  };
+}
+function useFieldset(schema) {
+  var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var ref = useRef(null);
+  var [errorMessage, dispatch] = useReducer((state, action) => {
+    switch (action.type) {
+      case 'report':
+        {
+          var {
+            key,
+            message
+          } = action.payload;
+
+          if (state[key] === message) {
+            return state;
+          }
+
+          return _objectSpread2(_objectSpread2({}, state), {}, {
+            [key]: message
+          });
+        }
+
+      case 'migrate':
+        {
+          var {
+            keys,
+            error
+          } = action.payload;
+          var nextState = state;
+
+          for (var _key of Object.keys(keys)) {
+            var prevError = state[_key];
+            var nextError = error === null || error === void 0 ? void 0 : error[_key];
+
+            if (typeof nextError === 'string' && prevError !== nextError) {
+              return _objectSpread2(_objectSpread2({}, nextState), {}, {
+                [_key]: nextError
+              });
+            }
+          }
+
+          return nextState;
+        }
+
+      case 'cleanup':
+        {
+          var {
+            fieldset
+          } = action.payload;
+          var updates = [];
+
+          for (var [_key2, _message] of Object.entries(state)) {
+            if (!_message) {
+              continue;
+            }
+
+            var fields = getFieldElements(fieldset, _key2);
+
+            if (fields.every(field => field.validity.valid)) {
+              updates.push([_key2, '']);
+            }
+          }
+
+          if (updates.length === 0) {
+            return state;
+          }
+
+          return _objectSpread2(_objectSpread2({}, state), Object.fromEntries(updates));
+        }
+
+      case 'reset':
+        {
+          return {};
+        }
+    }
+  }, {}, () => Object.fromEntries(Object.keys(schema.fields).reduce((result, name) => {
+    var _config$error;
+
+    var error = (_config$error = config.error) === null || _config$error === void 0 ? void 0 : _config$error[name];
+
+    if (typeof error === 'string') {
+      result.push([name, error]);
+    }
+
+    return result;
+  }, [])));
+  useEffect(() => {
+    var _schema$validate;
+
+    var fieldset = ref.current;
+
+    if (!fieldset) {
+      console.warn('No fieldset ref found; You must pass the fieldsetProps to the fieldset element');
+      return;
+    }
+
+    if (!(fieldset !== null && fieldset !== void 0 && fieldset.form)) {
+      console.warn('No form element is linked to the fieldset; Do you forgot setting the form attribute?');
+    }
+
+    (_schema$validate = schema.validate) === null || _schema$validate === void 0 ? void 0 : _schema$validate.call(schema, fieldset);
+    dispatch({
+      type: 'cleanup',
+      payload: {
+        fieldset
+      }
+    });
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [schema.validate]);
+  useEffect(() => {
+    dispatch({
+      type: 'migrate',
+      payload: {
+        keys: Object.keys(schema.fields),
+        error: config.error
+      }
+    });
+  }, [config.error, schema.fields]);
+  return [{
+    ref,
+    name: config.name,
+    form: config.form,
+
+    onInput(e) {
+      var _schema$validate2;
+
+      var fieldset = e.currentTarget;
+      (_schema$validate2 = schema.validate) === null || _schema$validate2 === void 0 ? void 0 : _schema$validate2.call(schema, fieldset);
+      dispatch({
+        type: 'cleanup',
+        payload: {
+          fieldset
+        }
+      });
+    },
+
+    onReset(e) {
+      setFieldState(e.currentTarget, {
+        touched: false
+      });
+      dispatch({
+        type: 'reset'
+      });
+    },
+
+    onInvalid(e) {
+      var element = isFieldElement(e.target) ? e.target : null;
+      var key = Object.keys(schema.fields).find(key => (element === null || element === void 0 ? void 0 : element.name) === getName([e.currentTarget.name, key]));
+
+      if (!element || !key) {
+        return;
+      } // Disable browser report
+
+
+      e.preventDefault();
+      dispatch({
+        type: 'report',
+        payload: {
+          key,
+          message: element.validationMessage
+        }
+      });
+    }
+
+  }, createFieldConfig(schema, _objectSpread2(_objectSpread2({}, config), {}, {
+    error: Object.assign({}, config.error, errorMessage)
+  }))];
+}
+function useFieldList(config) {
+  var _config$initialValue$, _config$initialValue;
+
+  var size = (_config$initialValue$ = (_config$initialValue = config.initialValue) === null || _config$initialValue === void 0 ? void 0 : _config$initialValue.length) !== null && _config$initialValue$ !== void 0 ? _config$initialValue$ : 1;
+  var [keys, setKeys] = useState(() => [...Array(size).keys()]);
+  var list = useMemo(() => keys.map((key, index) => {
+    var _config$initialValue2, _config$error2;
+
+    return {
+      key: "".concat(key),
+      config: _objectSpread2(_objectSpread2({}, config), {}, {
+        name: "".concat(config.name, "[").concat(index, "]"),
+        initialValue: (_config$initialValue2 = config.initialValue) === null || _config$initialValue2 === void 0 ? void 0 : _config$initialValue2[index],
+        error: (_config$error2 = config.error) === null || _config$error2 === void 0 ? void 0 : _config$error2[index],
+        // @ts-expect-error
+        constraint: _objectSpread2(_objectSpread2({}, config.constraint), {}, {
+          multiple: false
+        })
+      })
+    };
+  }), [keys, config]);
+  var controls = {
+    prepend() {
+      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'prepend', {})), {}, {
+        onClick(e) {
+          setKeys(keys => [Date.now(), ...keys]);
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    append() {
+      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'append', {})), {}, {
+        onClick(e) {
+          setKeys(keys => [...keys, Date.now()]);
+          e.preventDefault();
+        }
+
+      });
+    },
+
+    remove(index) {
+      return _objectSpread2(_objectSpread2({}, createControlButton(config.name, 'remove', {
+        index
+      })), {}, {
+        onClick(e) {
+          setKeys(keys => [...keys.slice(0, index), ...keys.slice(index + 1)]);
+          e.preventDefault();
+        }
+
+      });
+    }
+
+  };
+  useEffect(() => {
+    setKeys(keys => {
+      if (keys.length === size) {
+        return keys;
+      }
+
+      return [...Array(size).keys()];
+    });
+  }, [size]);
+  return [list, controls];
+}
+function useControlledInput(field) {
+  var _field$initialValue;
+
+  var [value, setValue] = useState("".concat((_field$initialValue = field.initialValue) !== null && _field$initialValue !== void 0 ? _field$initialValue : ''));
+  var [shouldBlur, setShouldBlur] = useState(false);
+  var ref = useRef(null);
+  var input = useMemo(() => /*#__PURE__*/createElement('input', _objectSpread2(_objectSpread2({}, field.constraint), {}, {
+    ref,
+    name: field.name,
+    defaultValue: field.initialValue,
+    style: {
+      display: 'none'
+    },
+    'aria-hidden': true
+  })), [field.constraint, field.name, field.initialValue]);
+  useEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+
+    ref.current.value = value;
+    ref.current.dispatchEvent(new InputEvent('input', {
+      bubbles: true
+    }));
+  }, [value]);
+  useEffect(() => {
+    var _ref$current;
+
+    if (!shouldBlur) {
+      return;
+    }
+
+    (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.dispatchEvent(new FocusEvent('focusout', {
+      bubbles: true
+    }));
+    setShouldBlur(false);
+  }, [shouldBlur]);
+  return [input, {
+    value,
+    onChange: value => {
+      setValue(value);
+    },
+    onBlur: () => {
+      setShouldBlur(true);
+    }
+  }];
+}
+
+export { useControlledInput, useFieldList, useFieldset, useForm };

package/module/index.js

@@ -0,0 +1,4 @@
+export { getFieldElements, parse } from '@conform-to/dom';
+export { useControlledInput, useFieldList, useFieldset, useForm } from './hooks.js';
+import * as helpers from './helpers.js';
+export { helpers as conform };

package/package.json

@@ -0,0 +1,35 @@
+{
+	"name": "@conform-to/react",
+	"description": "Conform view adapter for react",
+	"license": "MIT",
+	"version": "0.1.0",
+	"main": "index.js",
+	"module": "module/index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/edmundhung/conform",
+		"directory": "packages/conform-react"
+	},
+	"author": {
+		"name": "Edmund Hung",
+		"email": "me@edmund.dev",
+		"url": "https://edmund.dev"
+	},
+	"bugs": {
+		"url": "https://github.com/edmundhung/conform/issues"
+	},
+	"dependencies": {
+		"@conform-to/dom": "0.1.0"
+	},
+	"peerDependencies": {
+		"react": ">=16.8"
+	},
+	"keywords": [
+		"constraint-validation",
+		"form",
+		"form-validation",
+		"validation",
+		"react"
+	],
+	"sideEffects": false
+}