@conform-to/react 1.2.1 → 1.3.0

package/helpers.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import type { FormMetadata, FieldMetadata, Metadata, Pretty } from './context';
 type FormControlProps = {
-    key?: string;
+    key: string | undefined;
     id: string;
     name: string;
     form: string;

package/helpers.js

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

package/helpers.mjs

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

package/hooks.js

@@ -56,61 +56,10 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = context.useSubjectRef({
-    key: {
-      // Subscribe to all key changes so it will re-render and
-      // update the field value as soon as the DOM is updated
-      prefix: ['']
-    }
-  });
+  var subjectRef = context.useSubjectRef();
   var stateSnapshot = context.useFormState(context$1, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = context.getFormMetadata(context$1, subjectRef, stateSnapshot, noValidate);
-  react.useEffect(() => {
-    var formElement = document.forms.namedItem(formId);
-    if (!formElement) {
-      return;
-    }
-    var getAll = value => {
-      if (typeof value === 'string') {
-        return [value];
-      }
-      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
-        return value;
-      }
-      return undefined;
-    };
-    var get = value => {
-      var _getAll;
-      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
-    };
-    for (var element of formElement.elements) {
-      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-        var prev = element.dataset.conform;
-        var next = stateSnapshot.key[element.name];
-        var defaultValue = stateSnapshot.initialValue[element.name];
-        if (prev === 'managed' || element.type === 'submit' || element.type === 'reset' || element.type === 'button') {
-          // Skip buttons and fields managed by useInputControl()
-          continue;
-        }
-        if (typeof prev === 'undefined' || prev !== next) {
-          element.dataset.conform = next;
-          if ('options' in element) {
-            var _getAll2;
-            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
-            for (var option of element.options) {
-              option.selected = value.includes(option.value);
-            }
-          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
-            element.checked = get(defaultValue) === element.value;
-          } else {
-            var _get;
-            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
-          }
-        }
-      }
-    }
-  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/hooks.mjs

@@ -52,61 +52,10 @@ function useForm(options) {
       formId
     }));
   });
-  var subjectRef = useSubjectRef({
-    key: {
-      // Subscribe to all key changes so it will re-render and
-      // update the field value as soon as the DOM is updated
-      prefix: ['']
-    }
-  });
+  var subjectRef = useSubjectRef();
   var stateSnapshot = useFormState(context, subjectRef);
   var noValidate = useNoValidate(options.defaultNoValidate);
   var form = getFormMetadata(context, subjectRef, stateSnapshot, noValidate);
-  useEffect(() => {
-    var formElement = document.forms.namedItem(formId);
-    if (!formElement) {
-      return;
-    }
-    var getAll = value => {
-      if (typeof value === 'string') {
-        return [value];
-      }
-      if (Array.isArray(value) && value.every(item => typeof item === 'string')) {
-        return value;
-      }
-      return undefined;
-    };
-    var get = value => {
-      var _getAll;
-      return (_getAll = getAll(value)) === null || _getAll === void 0 ? void 0 : _getAll[0];
-    };
-    for (var element of formElement.elements) {
-      if (element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement) {
-        var prev = element.dataset.conform;
-        var next = stateSnapshot.key[element.name];
-        var defaultValue = stateSnapshot.initialValue[element.name];
-        if (prev === 'managed' || element.type === 'submit' || element.type === 'reset' || element.type === 'button') {
-          // Skip buttons and fields managed by useInputControl()
-          continue;
-        }
-        if (typeof prev === 'undefined' || prev !== next) {
-          element.dataset.conform = next;
-          if ('options' in element) {
-            var _getAll2;
-            var value = (_getAll2 = getAll(defaultValue)) !== null && _getAll2 !== void 0 ? _getAll2 : [];
-            for (var option of element.options) {
-              option.selected = value.includes(option.value);
-            }
-          } else if ('checked' in element && (element.type === 'checkbox' || element.type === 'radio')) {
-            element.checked = get(defaultValue) === element.value;
-          } else {
-            var _get;
-            element.value = (_get = get(defaultValue)) !== null && _get !== void 0 ? _get : '';
-          }
-        }
-      }
-    }
-  }, [formId, stateSnapshot]);
   return [form, form.getFieldset()];
 }
 function useFormMetadata(formId) {

package/integrations.js

@@ -31,7 +31,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'managed';
+  select.dataset.conform = 'true';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -52,7 +52,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'managed';
+  return element.dataset.conform === 'true';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -216,8 +216,21 @@ function useControl(meta) {
     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 : '');
+    }
+  };
   return {
-    register,
+    register: refCallback,
     value,
     change: handleChange,
     focus,

package/integrations.mjs

@@ -27,7 +27,7 @@ function createDummySelect(form, name, value) {
   var options = typeof value === 'string' ? [value] : value !== null && value !== void 0 ? value : [];
   select.name = name;
   select.multiple = true;
-  select.dataset.conform = 'managed';
+  select.dataset.conform = 'true';
 
   // To make sure the input is hidden but still focusable
   select.setAttribute('aria-hidden', 'true');
@@ -48,7 +48,7 @@ function createDummySelect(form, name, value) {
   return select;
 }
 function isDummySelect(element) {
-  return element.dataset.conform === 'managed';
+  return element.dataset.conform === 'true';
 }
 function updateFieldValue(element, value) {
   if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
@@ -212,8 +212,21 @@ function useControl(meta) {
     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 : '');
+    }
+  };
   return {
-    register,
+    register: refCallback,
     value,
     change: handleChange,
     focus,

package/package.json

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