@conform-to/dom 1.0.0 → 1.0.2

package/README

@@ -8,25 +8,30 @@
  ╚══════╝  ╚═════╝  ╚═╝  ╚══╝ ╚═╝        ╚═════╝  ╚═╝   ╚═╝ ╚═╝   ╚═╝
 
 
-Version 1.0.0-rc.1 / License MIT / Copyright (c) 2024 Edmund Hung
+Version 1.0.2 / 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
+# Getting Started
 
 Check out the overview and tutorial at our website https://conform.guide
 
-> Documentation
+# Features
 
-The documentation is divided into several sections:
+- Progressive enhancement first APIs
+- Type-safe field inference
+- Fine-grained subscription
+- Built-in accessibility helpers
+- Automatic type coercion with Zod
 
-* Overview: https://conform.guide/overview
-* Examples: https://conform.guide/examples
-* Complex structures: https://conform.guide/complex-structures
-* UI Integrations: https://conform.guide/integrations
-* Accessibility Guide: https://conform.guide/accessibility
-* API Reference: https://conform.guide/references
+# Documentation
 
-> Support
+- 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/form.d.ts

@@ -1,14 +1,14 @@
 import { getFormAction, getFormEncType, getFormMethod } from './dom';
 import { type Intent, type Submission, type SubmissionResult } from './submission';
-export type UnionKeyof<T> = T extends any ? keyof T : never;
-export type UnionKeyType<T, K extends UnionKeyof<T>> = T extends {
-    [k in K]?: any;
-} ? T[K] : undefined;
-export type DefaultValue<Schema> = Schema extends string | number | boolean | Date | null | undefined ? Schema | string | null | undefined : Schema extends File ? null | undefined : Schema extends Array<infer Item> ? Array<DefaultValue<Item>> | null | undefined : Schema extends Record<string, any> ? {
-    [Key in UnionKeyof<Schema>]?: DefaultValue<UnionKeyType<Schema, Key>>;
+type BaseCombine<T, K extends PropertyKey = T extends unknown ? keyof T : never> = T extends unknown ? T & Partial<Record<Exclude<K, keyof T>, never>> : never;
+export type Combine<T> = {
+    [K in keyof BaseCombine<T>]: BaseCombine<T>[K];
+};
+export type DefaultValue<Schema> = Schema extends string | number | boolean | Date | bigint | null | undefined ? Schema | string | null | undefined : Schema extends File ? null | undefined : Schema extends Array<infer Item> ? Array<DefaultValue<Item>> | null | undefined : Schema extends Record<string, any> ? {
+    [Key in keyof Combine<Schema>]?: DefaultValue<Combine<Schema>[Key]>;
 } | null | undefined : string | null | undefined;
-export type FormValue<Schema> = Schema extends string | number | boolean | Date | null | undefined ? string | undefined : Schema extends File ? File | undefined : Schema extends Array<infer Item> ? Array<FormValue<Item>> | undefined : Schema extends Record<string, any> ? {
-    [Key in UnionKeyof<Schema>]?: FormValue<UnionKeyType<Schema, Key>>;
+export type FormValue<Schema> = Schema extends string | number | boolean | Date | bigint | null | undefined ? string | undefined : Schema extends File ? File | undefined : Schema extends File[] ? File | Array<File> | undefined : Schema extends Array<infer Item> ? string | Array<FormValue<Item>> | undefined : Schema extends Record<string, any> ? {
+    [Key in keyof Combine<Schema>]?: DefaultValue<Combine<Schema>[Key]>;
 } | undefined : unknown;
 declare const error: unique symbol;
 declare const field: unique symbol;

package/form.js

@@ -11,7 +11,9 @@ var submission = require('./submission.js');
 function createFormMeta(options, initialized) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
   var lastResult = !initialized ? options.lastResult : undefined;
-  var defaultValue = options.defaultValue ? submission.serialize(options.defaultValue) : {};
+  var defaultValue = options.defaultValue ?
+  // @ts-expect-error
+  submission.serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
@@ -52,7 +54,7 @@ function handleIntent(meta, intent, initialized) {
         if (typeof intent.payload.value !== 'undefined') {
           var _intent$payload$name;
           var _name = (_intent$payload$name = intent.payload.name) !== null && _intent$payload$name !== void 0 ? _intent$payload$name : '';
-          var value = intent.payload.value;
+          var value = submission.serialize(intent.payload.value);
           updateValue(meta, _name, value);
         }
         break;
@@ -96,12 +98,15 @@ function createStateProxy(fn) {
   return new Proxy(cache, {
     get(_, name, receiver) {
       var _cache$name;
+      if (typeof name !== 'string') {
+        return;
+      }
       return (_cache$name = cache[name]) !== null && _cache$name !== void 0 ? _cache$name : cache[name] = fn(name, receiver);
     }
   });
 }
 function createValueProxy(value) {
-  var val = formdata.simplify(value);
+  var val = formdata.normalize(value);
   return createStateProxy((name, proxy) => {
     if (name === '') {
       return val;
@@ -210,9 +215,7 @@ function createFormContext(options) {
   var meta = createFormMeta(options);
   var state = createFormState(meta);
   function getFormElement() {
-    var element = document.forms.namedItem(latestOptions.formId);
-    util.invariant(element !== null, "Form#".concat(latestOptions.formId, " does not exist"));
-    return element;
+    return document.forms.namedItem(latestOptions.formId);
   }
   function createFormState(next) {
     var prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : next;
@@ -316,7 +319,7 @@ function createFormContext(options) {
   function resolveTarget(event) {
     var form = getFormElement();
     var element = event.target;
-    if (!dom.isFieldElement(element) || element.form !== form || element.name === '') {
+    if (!form || !dom.isFieldElement(element) || element.form !== form || element.name === '') {
       return null;
     }
     return element;
@@ -372,7 +375,7 @@ function createFormContext(options) {
     var _result$error, _result$state$validat, _result$state;
     var formElement = getFormElement();
     if (!result.initialValue) {
-      formElement.reset();
+      formElement === null || formElement === void 0 || formElement.reset();
       return;
     }
     var error = Object.entries((_result$error = result.error) !== null && _result$error !== void 0 ? _result$error : {}).reduce((result, _ref4) => {
@@ -393,7 +396,7 @@ function createFormContext(options) {
       handleIntent(update, result.intent, true);
     }
     updateFormMeta(update);
-    if (result.status === 'error') {
+    if (formElement && result.status === 'error') {
       for (var element of formElement.elements) {
         if (dom.isFieldElement(element) && error[element.name]) {
           element.focus();
@@ -409,7 +412,8 @@ function createFormContext(options) {
     // Merge new options with the latest options
     Object.assign(latestOptions, options);
     if (latestOptions.formId !== currentFormId) {
-      getFormElement().reset();
+      var _getFormElement;
+      (_getFormElement = getFormElement()) === null || _getFormElement === void 0 || _getFormElement.reset();
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }

package/form.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { flatten, formatPaths, getPaths, getValue, setValue, isPlainObject, simplify, getFormData, isPrefix } from './formdata.mjs';
+import { flatten, formatPaths, getPaths, getValue, setValue, isPlainObject, normalize, getFormData, isPrefix } from './formdata.mjs';
 import { getFormAction, getFormEncType, getFormMethod, isFieldElement, requestSubmit } from './dom.mjs';
 import { generateId, clone, invariant } from './util.mjs';
 import { serialize, setListState, setListValue, setState, getSubmissionContext, INTENT, serializeIntent, STATE } from './submission.mjs';
@@ -7,7 +7,9 @@ import { serialize, setListState, setListValue, setState, getSubmissionContext,
 function createFormMeta(options, initialized) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
   var lastResult = !initialized ? options.lastResult : undefined;
-  var defaultValue = options.defaultValue ? serialize(options.defaultValue) : {};
+  var defaultValue = options.defaultValue ?
+  // @ts-expect-error
+  serialize(options.defaultValue) : {};
   var initialValue = (_lastResult$initialVa = lastResult === null || lastResult === void 0 ? void 0 : lastResult.initialValue) !== null && _lastResult$initialVa !== void 0 ? _lastResult$initialVa : defaultValue;
   var result = {
     submissionStatus: lastResult === null || lastResult === void 0 ? void 0 : lastResult.status,
@@ -48,7 +50,7 @@ function handleIntent(meta, intent, initialized) {
         if (typeof intent.payload.value !== 'undefined') {
           var _intent$payload$name;
           var _name = (_intent$payload$name = intent.payload.name) !== null && _intent$payload$name !== void 0 ? _intent$payload$name : '';
-          var value = intent.payload.value;
+          var value = serialize(intent.payload.value);
           updateValue(meta, _name, value);
         }
         break;
@@ -92,12 +94,15 @@ function createStateProxy(fn) {
   return new Proxy(cache, {
     get(_, name, receiver) {
       var _cache$name;
+      if (typeof name !== 'string') {
+        return;
+      }
       return (_cache$name = cache[name]) !== null && _cache$name !== void 0 ? _cache$name : cache[name] = fn(name, receiver);
     }
   });
 }
 function createValueProxy(value) {
-  var val = simplify(value);
+  var val = normalize(value);
   return createStateProxy((name, proxy) => {
     if (name === '') {
       return val;
@@ -206,9 +211,7 @@ function createFormContext(options) {
   var meta = createFormMeta(options);
   var state = createFormState(meta);
   function getFormElement() {
-    var element = document.forms.namedItem(latestOptions.formId);
-    invariant(element !== null, "Form#".concat(latestOptions.formId, " does not exist"));
-    return element;
+    return document.forms.namedItem(latestOptions.formId);
   }
   function createFormState(next) {
     var prev = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : next;
@@ -312,7 +315,7 @@ function createFormContext(options) {
   function resolveTarget(event) {
     var form = getFormElement();
     var element = event.target;
-    if (!isFieldElement(element) || element.form !== form || element.name === '') {
+    if (!form || !isFieldElement(element) || element.form !== form || element.name === '') {
       return null;
     }
     return element;
@@ -368,7 +371,7 @@ function createFormContext(options) {
     var _result$error, _result$state$validat, _result$state;
     var formElement = getFormElement();
     if (!result.initialValue) {
-      formElement.reset();
+      formElement === null || formElement === void 0 || formElement.reset();
       return;
     }
     var error = Object.entries((_result$error = result.error) !== null && _result$error !== void 0 ? _result$error : {}).reduce((result, _ref4) => {
@@ -389,7 +392,7 @@ function createFormContext(options) {
       handleIntent(update, result.intent, true);
     }
     updateFormMeta(update);
-    if (result.status === 'error') {
+    if (formElement && result.status === 'error') {
       for (var element of formElement.elements) {
         if (isFieldElement(element) && error[element.name]) {
           element.focus();
@@ -405,7 +408,8 @@ function createFormContext(options) {
     // Merge new options with the latest options
     Object.assign(latestOptions, options);
     if (latestOptions.formId !== currentFormId) {
-      getFormElement().reset();
+      var _getFormElement;
+      (_getFormElement = getFormElement()) === null || _getFormElement === void 0 || _getFormElement.reset();
     } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }

package/formdata.d.ts

@@ -43,11 +43,11 @@ export declare function isPlainObject(obj: unknown): obj is Record<string | numb
  */
 export declare function isFile(obj: unknown): obj is File;
 /**
- * Simplify value by removing empty object or array and null values
+ * Normalize value by removing empty object or array, empty string and null values
  */
-export declare function simplify<Type extends Record<string, unknown>>(value: Type | null): Type | undefined;
-export declare function simplify<Type extends Array<unknown>>(value: Type | null): Type | undefined;
-export declare function simplify(value: unknown): unknown | undefined;
+export declare function normalize<Type extends Record<string, unknown>>(value: Type | null): Type | null | undefined;
+export declare function normalize<Type extends Array<unknown>>(value: Type | null): Type | null | undefined;
+export declare function normalize(value: unknown): unknown | undefined;
 /**
  * Flatten a tree into a dictionary
  */

package/formdata.js

@@ -132,13 +132,13 @@ function isFile(obj) {
 }
 
 /**
- * Simplify value by removing empty object or array and null values
+ * Normalize value by removing empty object or array, empty string and null values
  */
 
-function simplify(value) {
+function normalize(value) {
   if (isPlainObject(value)) {
     var obj = Object.keys(value).sort().reduce((result, key) => {
-      var data = simplify(value[key]);
+      var data = normalize(value[key]);
       if (typeof data !== 'undefined') {
         result[key] = data;
       }
@@ -153,11 +153,20 @@ function simplify(value) {
     if (value.length === 0) {
       return undefined;
     }
-    return value.map(simplify);
+    return value.map(normalize);
   }
-  if (typeof value === 'string' && value === '' || value === null || isFile(value)) {
+  if (typeof value === 'string' && value === '' || value === null || isFile(value) && value.size === 0) {
     return;
   }
+
+  // We will skip serializing file if the result is sent to the client
+  if (isFile(value)) {
+    return Object.assign(value, {
+      toJSON() {
+        return;
+      }
+    });
+  }
   return value;
 }
 
@@ -169,7 +178,7 @@ function flatten(data, options) {
   var result = {};
   var resolve = (_options$resolve = options === null || options === void 0 ? void 0 : options.resolve) !== null && _options$resolve !== void 0 ? _options$resolve : data => data;
   function setResult(data, name) {
-    var value = simplify(resolve(data));
+    var value = normalize(resolve(data));
     if (typeof value !== 'undefined') {
       result[name] = value;
     }
@@ -221,5 +230,5 @@ exports.getValue = getValue;
 exports.isFile = isFile;
 exports.isPlainObject = isPlainObject;
 exports.isPrefix = isPrefix;
+exports.normalize = normalize;
 exports.setValue = setValue;
-exports.simplify = simplify;

package/formdata.mjs

@@ -128,13 +128,13 @@ function isFile(obj) {
 }
 
 /**
- * Simplify value by removing empty object or array and null values
+ * Normalize value by removing empty object or array, empty string and null values
  */
 
-function simplify(value) {
+function normalize(value) {
   if (isPlainObject(value)) {
     var obj = Object.keys(value).sort().reduce((result, key) => {
-      var data = simplify(value[key]);
+      var data = normalize(value[key]);
       if (typeof data !== 'undefined') {
         result[key] = data;
       }
@@ -149,11 +149,20 @@ function simplify(value) {
     if (value.length === 0) {
       return undefined;
     }
-    return value.map(simplify);
+    return value.map(normalize);
   }
-  if (typeof value === 'string' && value === '' || value === null || isFile(value)) {
+  if (typeof value === 'string' && value === '' || value === null || isFile(value) && value.size === 0) {
     return;
   }
+
+  // We will skip serializing file if the result is sent to the client
+  if (isFile(value)) {
+    return Object.assign(value, {
+      toJSON() {
+        return;
+      }
+    });
+  }
   return value;
 }
 
@@ -165,7 +174,7 @@ function flatten(data, options) {
   var result = {};
   var resolve = (_options$resolve = options === null || options === void 0 ? void 0 : options.resolve) !== null && _options$resolve !== void 0 ? _options$resolve : data => data;
   function setResult(data, name) {
-    var value = simplify(resolve(data));
+    var value = normalize(resolve(data));
     if (typeof value !== 'undefined') {
       result[name] = value;
     }
@@ -209,4 +218,4 @@ function flatten(data, options) {
   return result;
 }
 
-export { flatten, formatPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, setValue, simplify };
+export { flatten, formatPaths, getFormData, getPaths, getValue, isFile, isPlainObject, isPrefix, normalize, setValue };

package/index.d.ts

@@ -1,4 +1,4 @@
-export { type UnionKeyof, type UnionKeyType, 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 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 } from './dom';
 export { type Submission, type SubmissionResult, type Intent, INTENT, STATE, serializeIntent, parse, } from './submission';
 export { getPaths, formatPaths, isPrefix } from './formdata';

package/package.json

@@ -3,7 +3,7 @@
 	"description": "A set of opinionated helpers built on top of the Constraint Validation API",
 	"homepage": "https://conform.guide",
 	"license": "MIT",
-	"version": "1.0.0",
+	"version": "1.0.2",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",

package/submission.js

@@ -62,9 +62,9 @@ function parse(payload, options) {
         {
           var {
             name,
-            value: _value,
             validated
           } = intent.payload;
+          var _value = serialize(intent.payload.value);
           if (typeof _value !== 'undefined') {
             if (name) {
               formdata.setValue(context.payload, name, () => _value);
@@ -161,7 +161,7 @@ function createSubmission(context) {
   };
 }
 function replySubmission(context) {
-  var _context$intent, _context$error, _simplify;
+  var _context$intent, _options$formErrors, _normalize;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   switch ((_context$intent = context.intent) === null || _context$intent === void 0 ? void 0 : _context$intent.type) {
     case 'reset':
@@ -188,21 +188,21 @@ function replySubmission(context) {
       }
     }
   }
-  var submissionError = Object.entries((_context$error = context.error) !== null && _context$error !== void 0 ? _context$error : {}).reduce((result, _ref) => {
+  var submissionError = context.error ? Object.entries(context.error).reduce((result, _ref) => {
     var [name, error] = _ref;
     if (context.state.validated[name]) {
       result[name] = error;
     }
     return result;
-  }, {});
-  var extraError = 'formErrors' in options || 'fieldErrors' in options ? formdata.simplify(_rollupPluginBabelHelpers.objectSpread2({
-    '': options.formErrors
+  }, {}) : undefined;
+  var extraError = 'formErrors' in options || 'fieldErrors' in options ? formdata.normalize(_rollupPluginBabelHelpers.objectSpread2({
+    '': (_options$formErrors = options.formErrors) !== null && _options$formErrors !== void 0 ? _options$formErrors : null
   }, options.fieldErrors)) : null;
-  var error = formdata.simplify(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submissionError), extraError));
+  var error = submissionError || extraError ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, submissionError), extraError) : undefined;
   return {
     status: context.intent ? undefined : error ? 'error' : 'success',
     intent: context.intent ? context.intent : undefined,
-    initialValue: (_simplify = formdata.simplify(context.payload)) !== null && _simplify !== void 0 ? _simplify : {},
+    initialValue: (_normalize = formdata.normalize(context.payload)) !== null && _normalize !== void 0 ? _normalize : {},
     error,
     state: context.state
   };

package/submission.mjs

@@ -1,5 +1,5 @@
 import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.mjs';
-import { setValue, isPlainObject, flatten, getValue, simplify, isPrefix } from './formdata.mjs';
+import { setValue, isPlainObject, flatten, getValue, normalize, isPrefix } from './formdata.mjs';
 import { invariant } from './util.mjs';
 
 /**
@@ -58,9 +58,9 @@ function parse(payload, options) {
         {
           var {
             name,
-            value: _value,
             validated
           } = intent.payload;
+          var _value = serialize(intent.payload.value);
           if (typeof _value !== 'undefined') {
             if (name) {
               setValue(context.payload, name, () => _value);
@@ -157,7 +157,7 @@ function createSubmission(context) {
   };
 }
 function replySubmission(context) {
-  var _context$intent, _context$error, _simplify;
+  var _context$intent, _options$formErrors, _normalize;
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   switch ((_context$intent = context.intent) === null || _context$intent === void 0 ? void 0 : _context$intent.type) {
     case 'reset':
@@ -184,21 +184,21 @@ function replySubmission(context) {
       }
     }
   }
-  var submissionError = Object.entries((_context$error = context.error) !== null && _context$error !== void 0 ? _context$error : {}).reduce((result, _ref) => {
+  var submissionError = context.error ? Object.entries(context.error).reduce((result, _ref) => {
     var [name, error] = _ref;
     if (context.state.validated[name]) {
       result[name] = error;
     }
     return result;
-  }, {});
-  var extraError = 'formErrors' in options || 'fieldErrors' in options ? simplify(_objectSpread2({
-    '': options.formErrors
+  }, {}) : undefined;
+  var extraError = 'formErrors' in options || 'fieldErrors' in options ? normalize(_objectSpread2({
+    '': (_options$formErrors = options.formErrors) !== null && _options$formErrors !== void 0 ? _options$formErrors : null
   }, options.fieldErrors)) : null;
-  var error = simplify(_objectSpread2(_objectSpread2({}, submissionError), extraError));
+  var error = submissionError || extraError ? _objectSpread2(_objectSpread2({}, submissionError), extraError) : undefined;
   return {
     status: context.intent ? undefined : error ? 'error' : 'success',
     intent: context.intent ? context.intent : undefined,
-    initialValue: (_simplify = simplify(context.payload)) !== null && _simplify !== void 0 ? _simplify : {},
+    initialValue: (_normalize = normalize(context.payload)) !== null && _normalize !== void 0 ? _normalize : {},
     error,
     state: context.state
   };