@conform-to/react 1.3.0 → 1.5.0

package/README.md

@@ -0,0 +1,36 @@
+```
+ ███████╗  ██████╗  ███╗  ██╗ ████████╗  ██████╗  ███████╗  ███╗ ███╗
+██╔═════╝ ██╔═══██╗ ████╗ ██║ ██╔═════╝ ██╔═══██╗ ██╔═══██╗ ████████║
+██║       ██║   ██║ ██╔██╗██║ ███████╗  ██║   ██║ ███████╔╝ ██╔██╔██║
+██║       ██║   ██║ ██║╚████║ ██╔════╝  ██║   ██║ ██╔═══██╗ ██║╚═╝██║
+╚███████╗ ╚██████╔╝ ██║ ╚███║ ██║       ╚██████╔╝ ██║   ██║ ██║   ██║
+ ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
+```
+
+Version 1.5.0 / License MIT / Copyright (c) 2024 Edmund Hung
+
+A type-safe form validation library utilizing web fundamentals to progressively enhance HTML Forms with full support for server frameworks like Remix and Next.js.
+
+# Getting Started
+
+Check out the overview and tutorial at our website https://conform.guide
+
+# Features
+
+- Progressive enhancement first APIs
+- Type-safe field inference
+- Fine-grained subscription
+- Built-in accessibility helpers
+- Automatic type coercion with Zod
+
+# Documentation
+
+- Validation: https://conform.guide/validation
+- Nested object and Array: https://conform.guide/complex-structures
+- UI Integrations: https://conform.guide/integration/ui-libraries
+- Intent button: https://conform.guide/intent-button
+- Accessibility Guide: https://conform.guide/accessibility
+
+# Support
+
+To report a bug, please open an issue on the repository at https://github.com/edmundhung/conform. For feature requests and questions, you can post them in the Discussions section.

package/context.js

@@ -56,7 +56,7 @@ function useSubjectRef() {
   return subjectRef;
 }
 function updateSubjectRef(ref, subject, scope, name) {
-  if (subject === 'status' || subject === 'formId') {
+  if (subject === 'status' || subject === 'formId' || subject === 'pendingIntents') {
     ref.current[subject] = true;
   } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;

package/context.mjs

@@ -52,7 +52,7 @@ function useSubjectRef() {
   return subjectRef;
 }
 function updateSubjectRef(ref, subject, scope, name) {
-  if (subject === 'status' || subject === 'formId') {
+  if (subject === 'status' || subject === 'formId' || subject === 'pendingIntents') {
     ref.current[subject] = true;
   } else if (typeof scope !== 'undefined' && typeof name !== 'undefined') {
     var _ref$current$subject$, _ref$current$subject;

package/helpers.js

@@ -73,7 +73,7 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_rollupPluginBabelHelpers.objectSpread2({
-    key: metadata.key,
+    key: undefined,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

package/helpers.mjs

@@ -69,7 +69,7 @@ function getFieldsetProps(metadata, options) {
  */
 function getFormControlProps(metadata, options) {
   return simplify(_objectSpread2({
-    key: metadata.key,
+    key: undefined,
     required: metadata.required || undefined
   }, getFieldsetProps(metadata, options)));
 }

package/hooks.js

@@ -56,10 +56,15 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = context.useSubjectRef();
+  var subjectRef = context.useSubjectRef({
+    pendingIntents: true
+  });
   var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
+  react.useEffect(() => {
+    context$1.runSideEffect(stateSnapshot.pendingIntents);
+  }, [context$1, stateSnapshot.pendingIntents]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/hooks.mjs

@@ -52,10 +52,15 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = useSubjectRef();
+  var subjectRef = useSubjectRef({
+    pendingIntents: true
+  });
   var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
+  useEffect(() => {
+    context.runSideEffect(stateSnapshot.pendingIntents);
+  }, [context, stateSnapshot.pendingIntents]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/integrations.d.ts

@@ -4,8 +4,8 @@ export declare function getFieldElements(form: HTMLFormElement | null, name: str
 export declare function getEventTarget(form: HTMLFormElement | null, name: string, value?: string | string[]): HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null;
 export declare function createDummySelect(form: HTMLFormElement, name: string, value?: string | string[] | undefined): HTMLSelectElement;
 export declare function isDummySelect(element: HTMLElement): element is HTMLSelectElement;
-export declare function updateFieldValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement, value: string | string[]): void;
-export declare function useInputEvent(): {
+export declare function getInputValue(element: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement): string | string[] | null;
+export declare function useInputEvent(onUpdate: React.Dispatch<React.SetStateAction<string | string[] | undefined>>): {
     change(value: string | string[]): void;
     focus(): void;
     blur(): void;

package/integrations.js

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var dom = require('@conform-to/dom');
 var react = require('react');
 
 function getFormElement(formId) {
@@ -54,58 +55,20 @@ function createDummySelect(form, name, value) {
 function isDummySelect(element) {
   return element.dataset.conform === 'true';
 }
-function updateFieldValue(element, value) {
-  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    element.checked = Array.isArray(value) ? value.includes(element.value) : element.value === value;
-  } else if (element instanceof HTMLSelectElement && element.multiple) {
-    var selectedValue = Array.isArray(value) ? [...value] : [value];
-    for (var option of element.options) {
-      var index = selectedValue.indexOf(option.value);
-      var selected = index > -1;
-
-      // Update the selected state of the option
-      option.selected = selected;
-      // Remove the option from the selected array
-      if (selected) {
-        selectedValue.splice(index, 1);
-      }
-    }
-
-    // Add the remaining options to the select element only if it's a dummy element managed by conform
-    if (isDummySelect(element)) {
-      for (var _option of selectedValue) {
-        element.options.add(new Option(_option, _option, false, true));
-      }
-    }
-  } else if (element.value !== value) {
-    // No `change` event will be triggered on React if `element.value` is already updated
-
-    /**
-     * 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');
-      }
-    }
+function getInputValue(element) {
+  if (element instanceof HTMLSelectElement) {
+    var _value$;
+    var _value = Array.from(element.selectedOptions).map(option => option.value);
+    return element.multiple ? _value : (_value$ = _value[0]) !== null && _value$ !== void 0 ? _value$ : null;
   }
+  if (element instanceof HTMLInputElement && (element.type === 'radio' || element.type === 'checkbox')) {
+    return element.checked ? element.value : null;
+  }
+  return element.value;
 }
-function useInputEvent() {
+function useInputEvent(onUpdate) {
   var ref = react.useRef(null);
+  var observerRef = react.useRef(null);
   var eventDispatched = react.useRef({
     change: false,
     focus: false,
@@ -139,7 +102,9 @@ function useInputEvent() {
           eventDispatched.current.change = true;
           var element = ref.current;
           if (element) {
-            updateFieldValue(element, value);
+            dom.unstable_updateFieldValue(element, {
+              value
+            });
 
             // Dispatch input event with the updated input value
             element.dispatchEvent(new InputEvent('input', {
@@ -181,9 +146,39 @@ function useInputEvent() {
       },
       register(element) {
         ref.current = element;
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+        if (!element) {
+          return;
+        }
+        observerRef.current = new MutationObserver(mutations => {
+          var _loop = function _loop() {
+            if (mutation.type === 'attributes') {
+              var _getInputValue;
+              var nextValue = (_getInputValue = getInputValue(element)) !== null && _getInputValue !== void 0 ? _getInputValue : undefined;
+              onUpdate(prevValue => {
+                if (nextValue === prevValue ||
+                // If the value is an array, check if the current value is the same as the new value
+                JSON.stringify(prevValue) === JSON.stringify(nextValue)) {
+                  return prevValue;
+                }
+                return nextValue;
+              });
+            }
+          };
+          for (var mutation of mutations) {
+            _loop();
+          }
+        });
+        observerRef.current.observe(element, {
+          attributes: true,
+          attributeFilter: ['data-conform']
+        });
       }
     };
-  }, []);
+  }, [onUpdate]);
 }
 function useInputValue(options) {
   var initializeValue = () => {
@@ -211,22 +206,26 @@ function useControl(meta) {
     change,
     focus,
     blur
-  } = useInputEvent();
+  } = useInputEvent(
+  // @ts-expect-error We will fix the type when stabilizing the API
+  setValue);
   var handleChange = value => {
     setValue(value);
     change(value);
   };
   var refCallback = element => {
-    var _meta$key;
     register(element);
     if (!element) {
       return;
     }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
+
+    // We were trying to sync the value based on key previously
+    // This is now handled mostly by the side effect
+    // But we still need to set the initial value for backward compatibility
+    if (!element.dataset.conform) {
+      dom.unstable_updateFieldValue(element, {
+        value
+      });
     }
   };
   return {
@@ -245,7 +244,9 @@ function useInputControl(meta) {
     change,
     focus,
     blur
-  } = useInputEvent();
+  } = useInputEvent(
+  // @ts-expect-error We will fix the type when stabilizing the API
+  setValue);
   react.useEffect(() => {
     var form = getFormElement(meta.formId);
     if (!form) {
@@ -290,8 +291,8 @@ exports.createDummySelect = createDummySelect;
 exports.getEventTarget = getEventTarget;
 exports.getFieldElements = getFieldElements;
 exports.getFormElement = getFormElement;
+exports.getInputValue = getInputValue;
 exports.isDummySelect = isDummySelect;
-exports.updateFieldValue = updateFieldValue;
 exports.useControl = useControl;
 exports.useInputControl = useInputControl;
 exports.useInputEvent = useInputEvent;

package/integrations.mjs

@@ -1,3 +1,4 @@
+import { unstable_updateFieldValue } from '@conform-to/dom';
 import { useRef, useEffect, useMemo, useState } from 'react';
 
 function getFormElement(formId) {
@@ -50,58 +51,20 @@ function createDummySelect(form, name, value) {
 function isDummySelect(element) {
   return element.dataset.conform === 'true';
 }
-function updateFieldValue(element, value) {
-  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    element.checked = Array.isArray(value) ? value.includes(element.value) : element.value === value;
-  } else if (element instanceof HTMLSelectElement && element.multiple) {
-    var selectedValue = Array.isArray(value) ? [...value] : [value];
-    for (var option of element.options) {
-      var index = selectedValue.indexOf(option.value);
-      var selected = index > -1;
-
-      // Update the selected state of the option
-      option.selected = selected;
-      // Remove the option from the selected array
-      if (selected) {
-        selectedValue.splice(index, 1);
-      }
-    }
-
-    // Add the remaining options to the select element only if it's a dummy element managed by conform
-    if (isDummySelect(element)) {
-      for (var _option of selectedValue) {
-        element.options.add(new Option(_option, _option, false, true));
-      }
-    }
-  } else if (element.value !== value) {
-    // No `change` event will be triggered on React if `element.value` is already updated
-
-    /**
-     * 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');
-      }
-    }
+function getInputValue(element) {
+  if (element instanceof HTMLSelectElement) {
+    var _value$;
+    var _value = Array.from(element.selectedOptions).map(option => option.value);
+    return element.multiple ? _value : (_value$ = _value[0]) !== null && _value$ !== void 0 ? _value$ : null;
   }
+  if (element instanceof HTMLInputElement && (element.type === 'radio' || element.type === 'checkbox')) {
+    return element.checked ? element.value : null;
+  }
+  return element.value;
 }
-function useInputEvent() {
+function useInputEvent(onUpdate) {
   var ref = useRef(null);
+  var observerRef = useRef(null);
   var eventDispatched = useRef({
     change: false,
     focus: false,
@@ -135,7 +98,9 @@ function useInputEvent() {
           eventDispatched.current.change = true;
           var element = ref.current;
           if (element) {
-            updateFieldValue(element, value);
+            unstable_updateFieldValue(element, {
+              value
+            });
 
             // Dispatch input event with the updated input value
             element.dispatchEvent(new InputEvent('input', {
@@ -177,9 +142,39 @@ function useInputEvent() {
       },
       register(element) {
         ref.current = element;
+        if (observerRef.current) {
+          observerRef.current.disconnect();
+          observerRef.current = null;
+        }
+        if (!element) {
+          return;
+        }
+        observerRef.current = new MutationObserver(mutations => {
+          var _loop = function _loop() {
+            if (mutation.type === 'attributes') {
+              var _getInputValue;
+              var nextValue = (_getInputValue = getInputValue(element)) !== null && _getInputValue !== void 0 ? _getInputValue : undefined;
+              onUpdate(prevValue => {
+                if (nextValue === prevValue ||
+                // If the value is an array, check if the current value is the same as the new value
+                JSON.stringify(prevValue) === JSON.stringify(nextValue)) {
+                  return prevValue;
+                }
+                return nextValue;
+              });
+            }
+          };
+          for (var mutation of mutations) {
+            _loop();
+          }
+        });
+        observerRef.current.observe(element, {
+          attributes: true,
+          attributeFilter: ['data-conform']
+        });
       }
     };
-  }, []);
+  }, [onUpdate]);
 }
 function useInputValue(options) {
   var initializeValue = () => {
@@ -207,22 +202,26 @@ function useControl(meta) {
     change,
     focus,
     blur
-  } = useInputEvent();
+  } = useInputEvent(
+  // @ts-expect-error We will fix the type when stabilizing the API
+  setValue);
   var handleChange = value => {
     setValue(value);
     change(value);
   };
   var refCallback = element => {
-    var _meta$key;
     register(element);
     if (!element) {
       return;
     }
-    var prevKey = element.dataset.conform;
-    var nextKey = "".concat((_meta$key = meta.key) !== null && _meta$key !== void 0 ? _meta$key : '');
-    if (prevKey !== nextKey) {
-      element.dataset.conform = nextKey;
-      updateFieldValue(element, value !== null && value !== void 0 ? value : '');
+
+    // We were trying to sync the value based on key previously
+    // This is now handled mostly by the side effect
+    // But we still need to set the initial value for backward compatibility
+    if (!element.dataset.conform) {
+      unstable_updateFieldValue(element, {
+        value
+      });
     }
   };
   return {
@@ -241,7 +240,9 @@ function useInputControl(meta) {
     change,
     focus,
     blur
-  } = useInputEvent();
+  } = useInputEvent(
+  // @ts-expect-error We will fix the type when stabilizing the API
+  setValue);
   useEffect(() => {
     var form = getFormElement(meta.formId);
     if (!form) {
@@ -281,4 +282,4 @@ function Control(props) {
   return props.render(control);
 }
 
-export { Control, createDummySelect, getEventTarget, getFieldElements, getFormElement, isDummySelect, updateFieldValue, useControl, useInputControl, useInputEvent, useInputValue };
+export { Control, createDummySelect, getEventTarget, getFieldElements, getFormElement, getInputValue, isDummySelect, useControl, useInputControl, useInputEvent, useInputValue };

package/package.json

@@ -3,7 +3,7 @@
   "description": "Conform view adapter for react",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "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.3.0"
+    "@conform-to/dom": "1.5.0"
   },
   "devDependencies": {
     "@babel/core": "^7.17.8",