@conform-to/dom 1.6.0 → 1.7.0

package/{form.mjs → dist/form.mjs}

@@ -1,6 +1,6 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
 import { flatten, formatName, getValue, isPlainObject, isPrefix, setValue, normalize, getFormData, getPaths, getChildPaths, formatPaths } from './formdata.mjs';
-import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit } from './dom.mjs';
+import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit, updateField } from './dom.mjs';
 import { generateId, clone, invariant } from './util.mjs';
 import { serialize, setListState, setListValue, setState, INTENT, serializeIntent, root, getSubmissionContext } from './submission.mjs';
 
@@ -578,8 +578,8 @@ function createFormContext(options) {
                 var paths = getChildPaths(parentPaths, element.name);
                 if (paths) {
                   var value = getValue(intent.payload.value, formatPaths(paths));
-                  updateFieldValue(element, {
-                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : ''
+                  updateField(element, {
+                    value: typeof value === 'string' || Array.isArray(value) && value.every(item => typeof item === 'string') ? value : null
                   });
 
                   // Update the element attribute to notify useControl / useInputControl hook
@@ -593,10 +593,10 @@ function createFormContext(options) {
           {
             var prefix = formatName(intent.payload.name, intent.payload.index);
             for (var _element of formElement.elements) {
-              if (isFieldElement(_element) && isPrefix(_element.name, prefix)) {
+              if (isFieldElement(_element) && _element.name && isPrefix(_element.name, prefix)) {
                 var _value2 = getValue(meta.defaultValue, _element.name);
-                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : _element instanceof HTMLSelectElement ? [] : '';
-                updateFieldValue(_element, {
+                var defaultValue = typeof _value2 === 'string' || Array.isArray(_value2) && _value2.every(item => typeof item === 'string') ? _value2 : null;
+                updateField(_element, {
                   defaultValue,
                   value: defaultValue
                 });
@@ -634,96 +634,4 @@ function createFormContext(options) {
   };
 }
 
-/**
- * Updates the DOM element with the provided value.
- *
- * @param element The form element to update
- * @param options The options to update the form element
- */
-function updateFieldValue(element, options) {
-  var value = typeof options.value === 'undefined' ? null : Array.isArray(options.value) ? Array.from(options.value) : [options.value];
-  var defaultValue = typeof options.defaultValue === 'undefined' ? null : Array.isArray(options.defaultValue) ? Array.from(options.defaultValue) : [options.defaultValue];
-  if (element instanceof HTMLInputElement && (element.type === 'checkbox' || element.type === 'radio')) {
-    if (value) {
-      element.checked = value.includes(element.value);
-    }
-    if (defaultValue) {
-      element.defaultChecked = defaultValue.includes(element.value);
-    }
-  } else if (element instanceof HTMLSelectElement) {
-    // If the select element is not multiple and the value is an empty array, unset the selected index
-    // This is to prevent the select element from showing the first option as selected
-    if (value && value.length === 0 && !element.multiple) {
-      element.selectedIndex = -1;
-    }
-    for (var option of element.options) {
-      if (value) {
-        var index = value.indexOf(option.value);
-        var selected = index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== selected) {
-          option.selected = selected;
-        }
-
-        // Remove the option from the value array
-        if (selected) {
-          value.splice(index, 1);
-        }
-      }
-      if (defaultValue) {
-        var _index = defaultValue.indexOf(option.value);
-        var _selected = _index > -1;
-
-        // Update the selected state of the option
-        if (option.selected !== _selected) {
-          option.defaultSelected = _selected;
-        }
-
-        // Remove the option from the defaultValue array
-        if (_selected) {
-          defaultValue.splice(_index, 1);
-        }
-      }
-    }
-
-    // We have already removed all selected options from the value and defaultValue array at this point
-    var missingOptions = new Set([...(value !== null && value !== void 0 ? value : []), ...(defaultValue !== null && defaultValue !== void 0 ? defaultValue : [])]);
-    for (var optionValue of missingOptions) {
-      element.options.add(new Option(optionValue, optionValue, defaultValue === null || defaultValue === void 0 ? void 0 : defaultValue.includes(optionValue), value === null || value === void 0 ? void 0 : value.includes(optionValue)));
-    }
-  } else {
-    if (value) {
-      var _value$;
-      /**
-       * 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 inputValue = (_value$ = value[0]) !== null && _value$ !== void 0 ? _value$ : '';
-      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, inputValue);
-      } else {
-        if (valueSetter) {
-          valueSetter.call(element, inputValue);
-        } else {
-          throw new Error('The given element does not have a value setter');
-        }
-      }
-    }
-    if (defaultValue) {
-      var _defaultValue$;
-      element.defaultValue = (_defaultValue$ = defaultValue[0]) !== null && _defaultValue$ !== void 0 ? _defaultValue$ : '';
-    }
-  }
-}
-
-export { createFormContext, updateFieldValue };
+export { createFormContext };

package/{formdata.d.ts → dist/formdata.d.ts}

@@ -64,3 +64,5 @@ export declare function flatten(data: unknown, options?: {
     resolve?: (data: unknown) => unknown;
     prefix?: string;
 }): Record<string, unknown>;
+export declare function deepEqual<Value>(prev: Value, next: Value): boolean;
+//# sourceMappingURL=formdata.d.ts.map

package/{formdata.js → dist/formdata.js}

@@ -213,7 +213,43 @@ function flatten(data) {
   }
   return result;
 }
+function deepEqual(prev, next) {
+  if (prev === next) {
+    return true;
+  }
+  if (!prev || !next) {
+    return false;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      return false;
+    }
+    for (var i = 0; i < prev.length; i++) {
+      if (!deepEqual(prev[i], next[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    var prevKeys = Object.keys(prev);
+    var nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+      return false;
+    }
+    for (var key of prevKeys) {
+      if (!Object.prototype.hasOwnProperty.call(next, key) ||
+      // @ts-expect-error FIXME
+      !deepEqual(prev[key], next[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
 
+exports.deepEqual = deepEqual;
 exports.flatten = flatten;
 exports.formatName = formatName;
 exports.formatPaths = formatPaths;

package/{formdata.mjs → dist/formdata.mjs}

@@ -209,5 +209,40 @@ function flatten(data) {
   }
   return result;
 }
+function deepEqual(prev, next) {
+  if (prev === next) {
+    return true;
+  }
+  if (!prev || !next) {
+    return false;
+  }
+  if (Array.isArray(prev) && Array.isArray(next)) {
+    if (prev.length !== next.length) {
+      return false;
+    }
+    for (var i = 0; i < prev.length; i++) {
+      if (!deepEqual(prev[i], next[i])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  if (isPlainObject(prev) && isPlainObject(next)) {
+    var prevKeys = Object.keys(prev);
+    var nextKeys = Object.keys(next);
+    if (prevKeys.length !== nextKeys.length) {
+      return false;
+    }
+    for (var key of prevKeys) {
+      if (!Object.prototype.hasOwnProperty.call(next, key) ||
+      // @ts-expect-error FIXME
+      !deepEqual(prev[key], next[key])) {
+        return false;
+      }
+    }
+    return true;
+  }
+  return false;
+}
 
-export { flatten, formatName, formatPaths, getChildPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };
+export { deepEqual, flatten, formatName, formatPaths, getChildPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };

package/dist/index.d.ts

@@ -0,0 +1,5 @@
+export { type Combine, type Constraint, type ControlButtonProps, type FormId, type FieldName, type DefaultValue, type FormValue, type FormOptions, type FormState, type FormContext, type SubscriptionSubject, type SubscriptionScope, createFormContext as unstable_createFormContext, } from './form';
+export { type FieldElement, isFieldElement, updateField as unstable_updateField, createFileList, createGlobalFormsObserver as unstable_createGlobalFormsObserver, focus as unstable_focus, change as unstable_change, blur as unstable_blur, } from './dom';
+export { type Submission, type SubmissionResult, type Intent, INTENT, STATE, serializeIntent, parse, } from './submission';
+export { getPaths, formatPaths, isPrefix, deepEqual as unstable_deepEqual, } from './formdata';
+//# sourceMappingURL=index.d.ts.map

package/{index.js → dist/index.js}

@@ -10,8 +10,13 @@ var formdata = require('./formdata.js');
 
 
 exports.unstable_createFormContext = form.createFormContext;
-exports.unstable_updateFieldValue = form.updateFieldValue;
+exports.createFileList = dom.createFileList;
 exports.isFieldElement = dom.isFieldElement;
+exports.unstable_blur = dom.blur;
+exports.unstable_change = dom.change;
+exports.unstable_createGlobalFormsObserver = dom.createGlobalFormsObserver;
+exports.unstable_focus = dom.focus;
+exports.unstable_updateField = dom.updateField;
 exports.INTENT = submission.INTENT;
 exports.STATE = submission.STATE;
 exports.parse = submission.parse;
@@ -19,3 +24,4 @@ exports.serializeIntent = submission.serializeIntent;
 exports.formatPaths = formdata.formatPaths;
 exports.getPaths = formdata.getPaths;
 exports.isPrefix = formdata.isPrefix;
+exports.unstable_deepEqual = formdata.deepEqual;

package/dist/index.mjs

@@ -0,0 +1,4 @@
+export { createFormContext as unstable_createFormContext } from './form.mjs';
+export { createFileList, isFieldElement, blur as unstable_blur, change as unstable_change, createGlobalFormsObserver as unstable_createGlobalFormsObserver, focus as unstable_focus, updateField as unstable_updateField } from './dom.mjs';
+export { INTENT, STATE, parse, serializeIntent } from './submission.mjs';
+export { formatPaths, getPaths, isPrefix, deepEqual as unstable_deepEqual } from './formdata.mjs';

package/{submission.d.ts → dist/submission.d.ts}

@@ -136,3 +136,4 @@ export declare const root: unique symbol;
 export declare function setState(state: Record<string, unknown>, name: string, valueFn: (value: unknown) => unknown): void;
 export declare function setListState(state: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent, getDefaultValue?: (defaultValue: any) => any): void;
 export declare function serialize<Schema>(defaultValue: Schema): FormValue<Schema>;
+//# sourceMappingURL=submission.d.ts.map

package/{util.d.ts → dist/util.d.ts}

@@ -1,3 +1,4 @@
 export declare function invariant(expectedCondition: boolean, message: string): asserts expectedCondition;
 export declare function generateId(): string;
 export declare function clone<Data>(data: Data): Data;
+//# sourceMappingURL=util.d.ts.map

package/dist/vitest.config.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("vite").UserConfig;
+export default _default;
+//# sourceMappingURL=vitest.config.d.ts.map

package/package.json

@@ -3,19 +3,23 @@
   "description": "A set of opinionated helpers built on top of the Constraint Validation API",
   "homepage": "https://conform.guide",
   "license": "MIT",
-  "version": "1.6.0",
-  "main": "index.js",
-  "module": "index.mjs",
-  "types": "index.d.ts",
+  "version": "1.7.0",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
   "exports": {
     ".": {
-      "types": "./index.d.ts",
-      "module": "./index.mjs",
-      "import": "./index.mjs",
-      "require": "./index.js",
-      "default": "./index.mjs"
+      "types": "./dist/index.d.ts",
+      "module": "./dist/index.mjs",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.mjs"
     }
   },
+  "files": [
+    "./dist/**/*.{js,mjs}",
+    "./dist/**/*.d.ts"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/edmundhung/conform",
@@ -50,10 +54,11 @@
   },
   "scripts": {
     "build:js": "rollup -c",
-    "build:ts": "tsc",
+    "build:ts": "tsc --project ./tsconfig.build.json",
     "build": "pnpm run \"/^build:.*/\"",
     "dev:js": "pnpm run build:js --watch",
     "dev:ts": "pnpm run build:ts --watch",
-    "dev": "pnpm run \"/^dev:.*/\""
+    "dev": "pnpm run \"/^dev:.*/\"",
+    "typecheck": "tsc"
   }
 }

package/dom.d.ts

@@ -1,43 +0,0 @@
-/**
- * Element that user can interact with,
- * includes `<input>`, `<select>` and `<textarea>`.
- */
-export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-export type FormControl = FieldElement | HTMLButtonElement;
-/**
- * Form Control element. It can either be a submit button or a submit input.
- */
-export type Submitter = HTMLInputElement | HTMLButtonElement;
-/**
- * A type guard to check if the provided element is a form control
- */
-export declare function isFormControl(element: unknown): element is FormControl;
-/**
- * A type guard to check if the provided element is a field element, which
- * is a form control excluding submit, button and reset type.
- */
-export declare function isFieldElement(element: unknown): element is FieldElement;
-/**
- * Resolves the action from the submit event
- * with respect to the submitter `formaction` attribute.
- */
-export declare function getFormAction(event: SubmitEvent): string;
-/**
- * Resolves the encoding type from the submit event
- * with respect to the submitter `formenctype` attribute.
- */
-export declare function getFormEncType(event: SubmitEvent): 'application/x-www-form-urlencoded' | 'multipart/form-data';
-/**
- * Resolves the method from the submit event
- * with respect to the submitter `formmethod` attribute.
- */
-export declare function getFormMethod(event: SubmitEvent): 'GET' | 'POST' | 'PUT' | 'PATCH' | 'DELETE';
-/**
- * Trigger a form submit event with an optional submitter.
- * If the submitter is not mounted, it will be appended to the form and removed after submission.
- */
-export declare function requestSubmit(form: HTMLFormElement | null | undefined, submitter: Submitter | null): void;

package/dom.js

@@ -1,104 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var util = require('./util.js');
-
-/**
- * Element that user can interact with,
- * includes `<input>`, `<select>` and `<textarea>`.
- */
-
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-
-/**
- * Form Control element. It can either be a submit button or a submit input.
- */
-
-/**
- * A type guard to check if the provided element is a form control
- */
-function isFormControl(element) {
-  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
-}
-
-/**
- * A type guard to check if the provided element is a field element, which
- * is a form control excluding submit, button and reset type.
- */
-function isFieldElement(element) {
-  return isFormControl(element) && element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
-}
-
-/**
- * Resolves the action from the submit event
- * with respect to the submitter `formaction` attribute.
- */
-function getFormAction(event) {
-  var _ref, _submitter$getAttribu;
-  var form = event.target;
-  var submitter = event.submitter;
-  return (_ref = (_submitter$getAttribu = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formaction')) !== null && _submitter$getAttribu !== void 0 ? _submitter$getAttribu : form.getAttribute('action')) !== null && _ref !== void 0 ? _ref : "".concat(location.pathname).concat(location.search);
-}
-
-/**
- * Resolves the encoding type from the submit event
- * with respect to the submitter `formenctype` attribute.
- */
-function getFormEncType(event) {
-  var _submitter$getAttribu2;
-  var form = event.target;
-  var submitter = event.submitter;
-  var encType = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.enctype;
-  if (encType === 'multipart/form-data') {
-    return encType;
-  }
-  return 'application/x-www-form-urlencoded';
-}
-
-/**
- * Resolves the method from the submit event
- * with respect to the submitter `formmethod` attribute.
- */
-function getFormMethod(event) {
-  var _ref2, _submitter$getAttribu3;
-  var form = event.target;
-  var submitter = event.submitter;
-  var method = (_ref2 = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.getAttribute('method')) === null || _ref2 === void 0 ? void 0 : _ref2.toUpperCase();
-  switch (method) {
-    case 'POST':
-    case 'PUT':
-    case 'PATCH':
-    case 'DELETE':
-      return method;
-  }
-  return 'GET';
-}
-
-/**
- * Trigger a form submit event with an optional submitter.
- * If the submitter is not mounted, it will be appended to the form and removed after submission.
- */
-function requestSubmit(form, submitter) {
-  util.invariant(!!form, 'Failed to submit the form. The element provided is null or undefined.');
-  if (typeof form.requestSubmit === 'function') {
-    form.requestSubmit(submitter);
-  } else {
-    var event = new SubmitEvent('submit', {
-      bubbles: true,
-      cancelable: true,
-      submitter
-    });
-    form.dispatchEvent(event);
-  }
-}
-
-exports.getFormAction = getFormAction;
-exports.getFormEncType = getFormEncType;
-exports.getFormMethod = getFormMethod;
-exports.isFieldElement = isFieldElement;
-exports.isFormControl = isFormControl;
-exports.requestSubmit = requestSubmit;

package/dom.mjs

@@ -1,95 +0,0 @@
-import { invariant } from './util.mjs';
-
-/**
- * Element that user can interact with,
- * includes `<input>`, `<select>` and `<textarea>`.
- */
-
-/**
- * HTML Element that can be used as a form control,
- * includes `<input>`, `<select>`, `<textarea>` and `<button>`.
- */
-
-/**
- * Form Control element. It can either be a submit button or a submit input.
- */
-
-/**
- * A type guard to check if the provided element is a form control
- */
-function isFormControl(element) {
-  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
-}
-
-/**
- * A type guard to check if the provided element is a field element, which
- * is a form control excluding submit, button and reset type.
- */
-function isFieldElement(element) {
-  return isFormControl(element) && element.type !== 'submit' && element.type !== 'button' && element.type !== 'reset';
-}
-
-/**
- * Resolves the action from the submit event
- * with respect to the submitter `formaction` attribute.
- */
-function getFormAction(event) {
-  var _ref, _submitter$getAttribu;
-  var form = event.target;
-  var submitter = event.submitter;
-  return (_ref = (_submitter$getAttribu = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formaction')) !== null && _submitter$getAttribu !== void 0 ? _submitter$getAttribu : form.getAttribute('action')) !== null && _ref !== void 0 ? _ref : "".concat(location.pathname).concat(location.search);
-}
-
-/**
- * Resolves the encoding type from the submit event
- * with respect to the submitter `formenctype` attribute.
- */
-function getFormEncType(event) {
-  var _submitter$getAttribu2;
-  var form = event.target;
-  var submitter = event.submitter;
-  var encType = (_submitter$getAttribu2 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formenctype')) !== null && _submitter$getAttribu2 !== void 0 ? _submitter$getAttribu2 : form.enctype;
-  if (encType === 'multipart/form-data') {
-    return encType;
-  }
-  return 'application/x-www-form-urlencoded';
-}
-
-/**
- * Resolves the method from the submit event
- * with respect to the submitter `formmethod` attribute.
- */
-function getFormMethod(event) {
-  var _ref2, _submitter$getAttribu3;
-  var form = event.target;
-  var submitter = event.submitter;
-  var method = (_ref2 = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.getAttribute('method')) === null || _ref2 === void 0 ? void 0 : _ref2.toUpperCase();
-  switch (method) {
-    case 'POST':
-    case 'PUT':
-    case 'PATCH':
-    case 'DELETE':
-      return method;
-  }
-  return 'GET';
-}
-
-/**
- * Trigger a form submit event with an optional submitter.
- * If the submitter is not mounted, it will be appended to the form and removed after submission.
- */
-function requestSubmit(form, submitter) {
-  invariant(!!form, 'Failed to submit the form. The element provided is null or undefined.');
-  if (typeof form.requestSubmit === 'function') {
-    form.requestSubmit(submitter);
-  } else {
-    var event = new SubmitEvent('submit', {
-      bubbles: true,
-      cancelable: true,
-      submitter
-    });
-    form.dispatchEvent(event);
-  }
-}
-
-export { getFormAction, getFormEncType, getFormMethod, isFieldElement, isFormControl, requestSubmit };

package/index.d.ts

@@ -1,4 +0,0 @@
-export { type Combine, type Constraint, type ControlButtonProps, type FormId, type FieldName, type DefaultValue, type FormValue, type FormOptions, type FormState, type FormContext, type SubscriptionSubject, type SubscriptionScope, createFormContext as unstable_createFormContext, updateFieldValue as unstable_updateFieldValue, } from './form';
-export { type FieldElement, isFieldElement } from './dom';
-export { type Submission, type SubmissionResult, type Intent, INTENT, STATE, serializeIntent, parse, } from './submission';
-export { getPaths, formatPaths, isPrefix } from './formdata';

package/index.mjs

@@ -1,4 +0,0 @@
-export { createFormContext as unstable_createFormContext, updateFieldValue as unstable_updateFieldValue } from './form.mjs';
-export { isFieldElement } from './dom.mjs';
-export { INTENT, STATE, parse, serializeIntent } from './submission.mjs';
-export { formatPaths, getPaths, isPrefix } from './formdata.mjs';