@conform-to/dom 1.0.0-pre.6 → 1.0.0-rc.0

package/form.mjs

@@ -2,7 +2,7 @@ import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHe
 import { flatten, formatPaths, getPaths, getValue, setValue, isPlainObject, simplify, 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, control, CONTROL, serializeControl, STATE } from './submission.mjs';
+import { serialize, setListState, setListValue, setState, getSubmissionContext, INTENT, serializeIntent, STATE } from './submission.mjs';
 
 function createFormMeta(options, initialized) {
   var _lastResult$initialVa, _options$constraint, _lastResult$state$val, _lastResult$state, _ref;
@@ -23,8 +23,8 @@ function createFormMeta(options, initialized) {
     // We can consider adding a warning if it happens
     error: (_ref = lastResult === null || lastResult === void 0 ? void 0 : lastResult.error) !== null && _ref !== void 0 ? _ref : {}
   };
-  if (lastResult !== null && lastResult !== void 0 && lastResult.control) {
-    handleControl(result, lastResult.control);
+  if (lastResult !== null && lastResult !== void 0 && lastResult.intent) {
+    handleIntent(result, lastResult.intent);
   }
   return result;
 }
@@ -41,24 +41,24 @@ function getDefaultKey(defaultValue, prefix) {
     return result;
   }, {});
 }
-function handleControl(meta, control, initialized) {
-  switch (control.type) {
-    case 'replace':
+function handleIntent(meta, intent, initialized) {
+  switch (intent.type) {
+    case 'update':
       {
-        var _control$payload$name;
-        var _name = (_control$payload$name = control.payload.name) !== null && _control$payload$name !== void 0 ? _control$payload$name : '';
-        var value = control.payload.value;
-        updateValue(meta, _name, value);
+        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;
+          updateValue(meta, _name, value);
+        }
         break;
       }
     case 'reset':
       {
-        if (typeof control.payload.value === 'undefined' || control.payload.value) {
-          var _control$payload$name2;
-          var _name2 = (_control$payload$name2 = control.payload.name) !== null && _control$payload$name2 !== void 0 ? _control$payload$name2 : '';
-          var _value = getValue(meta.defaultValue, _name2);
-          updateValue(meta, _name2, _value);
-        }
+        var _intent$payload$name2;
+        var _name2 = (_intent$payload$name2 = intent.payload.name) !== null && _intent$payload$name2 !== void 0 ? _intent$payload$name2 : '';
+        var _value = getValue(meta.defaultValue, _name2);
+        updateValue(meta, _name2, _value);
         break;
       }
     case 'insert':
@@ -68,8 +68,8 @@ function handleControl(meta, control, initialized) {
         if (initialized) {
           meta.initialValue = clone(meta.initialValue);
           meta.key = clone(meta.key);
-          setListState(meta.key, control, generateId);
-          setListValue(meta.initialValue, control);
+          setListState(meta.key, intent, generateId);
+          setListValue(meta.initialValue, intent);
         }
         break;
       }
@@ -145,7 +145,18 @@ function createKeyProxy(key) {
   });
 }
 function createValidProxy(error) {
-  return createStateProxy(name => typeof error[name] === 'undefined');
+  return createStateProxy(name => {
+    var keys = Object.keys(error);
+    if (name === '') {
+      return keys.length === 0;
+    }
+    for (var key of keys) {
+      if (isPrefix(key, name) && typeof error[key] !== 'undefined') {
+        return false;
+      }
+    }
+    return true;
+  });
 }
 function createDirtyProxy(defaultValue, value, shouldDirtyConsider) {
   return createStateProxy(name => JSON.stringify(defaultValue[name]) !== JSON.stringify(value[name], (key, value) => {
@@ -254,12 +265,12 @@ function createFormContext(options) {
     var element = form.elements.namedItem(STATE);
     invariant(element === null || isFieldElement(element), "The input name \"".concat(STATE, "\" is reserved by Conform. Please use another name."));
     if (!element) {
-      var _input = document.createElement('input');
-      _input.type = 'hidden';
-      _input.name = STATE;
-      _input.value = '';
-      form.append(_input);
-      return _input;
+      var input = document.createElement('input');
+      input.type = 'hidden';
+      input.name = STATE;
+      input.value = '';
+      form.append(input);
+      return input;
     }
     return element;
   }
@@ -286,21 +297,22 @@ function createFormContext(options) {
     if (typeof (latestOptions === null || latestOptions === void 0 ? void 0 : latestOptions.onValidate) === 'undefined') {
       var _latestOptions$onSubm;
       (_latestOptions$onSubm = latestOptions.onSubmit) === null || _latestOptions$onSubm === void 0 || _latestOptions$onSubm.call(latestOptions, event, context);
+      return;
+    }
+    var submission = latestOptions.onValidate({
+      form,
+      formData,
+      submitter
+    });
+    if (submission.status !== 'success' && submission.error !== null) {
+      report(submission.reply());
     } else {
       var _latestOptions$onSubm2;
-      var submission = latestOptions.onValidate({
-        form,
-        formData,
-        submitter
-      });
-      if (submission.status !== 'success' && submission.error !== null) {
-        report(submission.reply());
-        event.preventDefault();
-      }
       (_latestOptions$onSubm2 = latestOptions.onSubmit) === null || _latestOptions$onSubm2 === void 0 || _latestOptions$onSubm2.call(latestOptions, event, _objectSpread2(_objectSpread2({}, context), {}, {
         submission
       }));
     }
+    return submission;
   }
   function resolveTarget(event) {
     var form = getFormElement();
@@ -318,7 +330,7 @@ function createFormContext(options) {
     var validated = meta.validated[element.name];
     return validated ? shouldRevalidate === eventName : shouldValidate === eventName;
   }
-  function input(event) {
+  function onInput(event) {
     var element = resolveTarget(event);
     if (!element || !element.form) {
       return;
@@ -330,21 +342,27 @@ function createFormContext(options) {
         value: result.payload
       }));
     } else {
-      dispatch(control.validate({
-        name: element.name
-      }));
+      dispatch({
+        type: 'validate',
+        payload: {
+          name: element.name
+        }
+      });
     }
   }
-  function blur(event) {
+  function onBlur(event) {
     var element = resolveTarget(event);
     if (!element || event.defaultPrevented || !willValidate(element, 'onBlur')) {
       return;
     }
-    dispatch(control.validate({
-      name: element.name
-    }));
+    dispatch({
+      type: 'validate',
+      payload: {
+        name: element.name
+      }
+    });
   }
-  function reset(event) {
+  function onReset(event) {
     var element = getFormElement();
     if (event.type !== 'reset' || event.target !== element || event.defaultPrevented) {
       return;
@@ -372,8 +390,8 @@ function createFormContext(options) {
       error,
       validated: (_result$state$validat = (_result$state = result.state) === null || _result$state === void 0 ? void 0 : _result$state.validated) !== null && _result$state$validat !== void 0 ? _result$state$validat : {}
     });
-    if (result.control) {
-      handleControl(update, result.control, true);
+    if (result.intent) {
+      handleIntent(update, result.intent, true);
     }
     updateFormMeta(update);
     if (result.status === 'error') {
@@ -385,7 +403,7 @@ function createFormContext(options) {
       }
     }
   }
-  function update(options) {
+  function onUpdate(options) {
     var currentFormId = latestOptions.formId;
     var currentResult = latestOptions.lastResult;
 
@@ -393,7 +411,7 @@ function createFormContext(options) {
     Object.assign(latestOptions, options);
     if (latestOptions.formId !== currentFormId) {
       getFormElement().reset();
-    } else if (typeof options.lastResult !== 'undefined' && options.lastResult !== currentResult) {
+    } else if (options.lastResult && options.lastResult !== currentResult) {
       report(options.lastResult);
     }
   }
@@ -410,10 +428,10 @@ function createFormContext(options) {
   function getState() {
     return state;
   }
-  function dispatch(control) {
+  function dispatch(intent) {
     var form = getFormElement();
     var submitter = document.createElement('button');
-    var buttonProps = getControlButtonProps(control);
+    var buttonProps = getControlButtonProps(intent);
     submitter.name = buttonProps.name;
     submitter.value = buttonProps.value;
     submitter.hidden = true;
@@ -422,25 +440,47 @@ function createFormContext(options) {
     requestSubmit(form, submitter);
     form === null || form === void 0 || form.removeChild(submitter);
   }
-  function getControlButtonProps(control) {
+  function getControlButtonProps(intent) {
     return {
-      name: CONTROL,
-      value: serializeControl(control),
+      name: INTENT,
+      value: serializeIntent(intent),
       form: latestOptions.formId,
       formNoValidate: true
     };
   }
+  function createFormControl(type) {
+    var control = function control() {
+      var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      return dispatch({
+        type,
+        payload
+      });
+    };
+    return Object.assign(control, {
+      getButtonProps() {
+        var payload = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+        return getControlButtonProps({
+          type,
+          payload
+        });
+      }
+    });
+  }
   return {
     get formId() {
       return latestOptions.formId;
     },
     submit,
-    reset,
-    input,
-    blur,
-    dispatch,
-    getControlButtonProps,
-    update,
+    onReset,
+    onInput,
+    onBlur,
+    onUpdate,
+    validate: createFormControl('validate'),
+    reset: createFormControl('reset'),
+    update: createFormControl('update'),
+    insert: createFormControl('insert'),
+    remove: createFormControl('remove'),
+    reorder: createFormControl('reorder'),
     subscribe,
     getState,
     getSerializedState

package/formdata.js

@@ -137,9 +137,8 @@ function isFile(obj) {
 
 function simplify(value) {
   if (isPlainObject(value)) {
-    var obj = Object.entries(value).reduce((result, _ref) => {
-      var [key, value] = _ref;
-      var data = simplify(value);
+    var obj = Object.keys(value).sort().reduce((result, key) => {
+      var data = simplify(value[key]);
       if (typeof data !== 'undefined') {
         result[key] = data;
       }

package/formdata.mjs

@@ -133,9 +133,8 @@ function isFile(obj) {
 
 function simplify(value) {
   if (isPlainObject(value)) {
-    var obj = Object.entries(value).reduce((result, _ref) => {
-      var [key, value] = _ref;
-      var data = simplify(value);
+    var obj = Object.keys(value).sort().reduce((result, key) => {
+      var data = simplify(value[key]);
       if (typeof data !== 'undefined') {
         result[key] = data;
       }

package/index.d.ts

@@ -1,5 +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, } from './form';
-export { type FieldElement, isFieldElement, requestSubmit } from './dom';
-export { invariant } from './util';
-export { type Submission, type SubmissionResult, type FormControl, CONTROL, STATE, control, serializeControl, parse, } from './submission';
+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 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.js

@@ -4,21 +4,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var form = require('./form.js');
 var dom = require('./dom.js');
-var util = require('./util.js');
 var submission = require('./submission.js');
 var formdata = require('./formdata.js');
 
 
 
-exports.createFormContext = form.createFormContext;
+exports.unstable_createFormContext = form.createFormContext;
 exports.isFieldElement = dom.isFieldElement;
-exports.requestSubmit = dom.requestSubmit;
-exports.invariant = util.invariant;
-exports.CONTROL = submission.CONTROL;
+exports.INTENT = submission.INTENT;
 exports.STATE = submission.STATE;
-exports.control = submission.control;
 exports.parse = submission.parse;
-exports.serializeControl = submission.serializeControl;
+exports.serializeIntent = submission.serializeIntent;
 exports.formatPaths = formdata.formatPaths;
 exports.getPaths = formdata.getPaths;
 exports.isPrefix = formdata.isPrefix;

package/index.mjs

@@ -1,5 +1,4 @@
-export { createFormContext } from './form.mjs';
-export { isFieldElement, requestSubmit } from './dom.mjs';
-export { invariant } from './util.mjs';
-export { CONTROL, STATE, control, parse, serializeControl } from './submission.mjs';
+export { createFormContext as unstable_createFormContext } from './form.mjs';
+export { isFieldElement } from './dom.mjs';
+export { INTENT, STATE, parse, serializeIntent } from './submission.mjs';
 export { formatPaths, getPaths, isPrefix } from './formdata.mjs';

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-pre.6",
+	"version": "1.0.0-rc.0",
 	"main": "index.js",
 	"module": "index.mjs",
 	"types": "index.d.ts",

package/submission.d.ts

@@ -2,18 +2,18 @@ import type { DefaultValue, FieldName, FormValue } from './form';
 export type SubmissionState = {
     validated: Record<string, boolean>;
 };
-export type SubmissionContext<Value = null, FormError = unknown> = {
-    control: FormControl | null;
+export type SubmissionContext<Value = null, FormError = string[]> = {
+    intent: Intent | null;
     payload: Record<string, unknown>;
     fields: string[];
     value?: Value;
     error?: Record<string, FormError | null> | null;
     state: SubmissionState;
 };
-export type Submission<Schema, FormError = string[], Value = Schema> = {
+export type Submission<Schema, FormError = string[], FormValue = Schema> = {
     status: 'success';
     payload: Record<string, unknown>;
-    value: Value;
+    value: FormValue;
     reply(options?: ReplyOptions<FormError>): SubmissionResult<FormError>;
 } | {
     status: 'error' | undefined;
@@ -23,7 +23,7 @@ export type Submission<Schema, FormError = string[], Value = Schema> = {
 };
 export type SubmissionResult<FormError = string[]> = {
     status?: 'error' | 'success';
-    control?: FormControl;
+    intent?: Intent;
     initialValue?: Record<string, unknown> | null;
     error?: Record<string, FormError | null>;
     state?: SubmissionState;
@@ -38,26 +38,26 @@ export type ReplyOptions<FormError> = {
 /**
  * The name to be used when submitting a form control
  */
-export declare const CONTROL = "__control__";
+export declare const INTENT = "__intent__";
 /**
  * The name to be used when submitting a state
  */
 export declare const STATE = "__state__";
 export declare function getSubmissionContext(body: FormData | URLSearchParams): SubmissionContext;
 export declare function parse<FormValue, FormError>(payload: FormData | URLSearchParams, options: {
-    resolve: (payload: Record<string, any>, control: FormControl | null) => {
+    resolve: (payload: Record<string, any>, intent: Intent | null) => {
         value?: FormValue;
         error?: Record<string, FormError | null> | null;
     };
 }): Submission<FormValue, FormError>;
 export declare function parse<FormValue, FormError>(payload: FormData | URLSearchParams, options: {
-    resolve: (payload: Record<string, any>, control: FormControl | null) => Promise<{
+    resolve: (payload: Record<string, any>, intent: Intent | null) => Promise<{
         value?: FormValue;
         error?: Record<string, FormError | null> | null;
     }>;
 }): Promise<Submission<FormValue, FormError>>;
 export declare function parse<FormValue, FormError>(payload: FormData | URLSearchParams, options: {
-    resolve: (payload: Record<string, any>, control: FormControl | null) => {
+    resolve: (payload: Record<string, any>, intent: Intent | null) => {
         value?: FormValue;
         error?: Record<string, FormError | null> | null;
     } | Promise<{
@@ -67,36 +67,34 @@ export declare function parse<FormValue, FormError>(payload: FormData | URLSearc
 }): Submission<FormValue, FormError> | Promise<Submission<FormValue, FormError>>;
 export declare function createSubmission<FormValue, FormError>(context: SubmissionContext<FormValue, FormError>): Submission<FormValue, FormError>;
 export declare function replySubmission<FormError>(context: SubmissionContext<unknown, FormError>, options?: ReplyOptions<FormError>): SubmissionResult<FormError>;
-export type ValidateControl<Schema = any> = {
+export type ValidateIntent<Schema = any> = {
     type: 'validate';
     payload: {
         name?: FieldName<Schema>;
     };
 };
-export type ResetControl<Schema = any> = {
+export type ResetIntent<Schema = any> = {
     type: 'reset';
     payload: {
         name?: FieldName<Schema>;
-        value?: boolean;
-        validated?: boolean;
     };
 };
-export type ReplaceControl<Schema = unknown> = {
-    type: 'replace';
+export type UpdateIntent<Schema = unknown> = {
+    type: 'update';
     payload: {
-        name: FieldName<Schema>;
-        value: NonNullable<DefaultValue<Schema>>;
+        name?: FieldName<Schema>;
+        value?: NonNullable<DefaultValue<Schema>>;
         validated?: boolean;
     };
 };
-export type RemoveControl<Schema extends Array<any> = any> = {
+export type RemoveIntent<Schema extends Array<any> = any> = {
     type: 'remove';
     payload: {
         name: FieldName<Schema>;
         index: number;
     };
 };
-export type InsertControl<Schema extends Array<any> = any> = {
+export type InsertIntent<Schema extends Array<any> = any> = {
     type: 'insert';
     payload: {
         name: FieldName<Schema>;
@@ -104,7 +102,7 @@ export type InsertControl<Schema extends Array<any> = any> = {
         index?: number;
     };
 };
-export type ReorderControl<Schema extends Array<any> = any> = {
+export type ReorderIntent<Schema extends Array<any> = any> = {
     type: 'reorder';
     payload: {
         name: FieldName<Schema>;
@@ -112,40 +110,11 @@ export type ReorderControl<Schema extends Array<any> = any> = {
         to: number;
     };
 };
-export type FormControl<Schema = unknown> = ValidateControl<Schema> | ResetControl<Schema> | ReplaceControl<Schema> | ReorderControl<Schema extends Array<any> ? Schema : any> | RemoveControl<Schema extends Array<any> ? Schema : any> | InsertControl<Schema extends Array<any> ? Schema : any>;
-export declare function getControl(serializedControl: string | null | undefined): FormControl | null;
-export declare function serializeControl(control: FormControl): string;
-export declare function updateList(list: unknown, control: InsertControl | RemoveControl | ReorderControl): void;
-export declare function setListValue(data: Record<string, unknown>, control: InsertControl | RemoveControl | ReorderControl): void;
+export type Intent<Schema = unknown> = ValidateIntent<Schema> | ResetIntent<Schema> | UpdateIntent<Schema> | ReorderIntent<Schema extends Array<any> ? Schema : any> | RemoveIntent<Schema extends Array<any> ? Schema : any> | InsertIntent<Schema extends Array<any> ? Schema : any>;
+export declare function getIntent(serializedIntent: string | null | undefined): Intent | null;
+export declare function serializeIntent<Schema>(intent: Intent<Schema>): string;
+export declare function updateList(list: unknown, intent: InsertIntent | RemoveIntent | ReorderIntent): void;
+export declare function setListValue(data: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent): void;
 export declare function setState(state: Record<string, unknown>, name: string, valueFn: (value: unknown) => unknown): void;
-export declare function setListState(state: Record<string, unknown>, control: InsertControl | RemoveControl | ReorderControl, getDefaultValue?: () => string): void;
+export declare function setListState(state: Record<string, unknown>, intent: InsertIntent | RemoveIntent | ReorderIntent, getDefaultValue?: () => string): void;
 export declare function serialize<Schema>(defaultValue: DefaultValue<Schema>): FormValue<Schema>;
-export declare const control: {
-    reset: <Schema>(payload?: {
-        name?: FieldName<Schema> | undefined;
-        value?: boolean | undefined;
-        validated?: boolean | undefined;
-    } | undefined) => ResetControl<Schema>;
-    validate: <Schema_1>(payload?: {
-        name?: FieldName<Schema_1> | undefined;
-    } | undefined) => ValidateControl<Schema_1>;
-    replace: <Schema_2>(payload: {
-        name: FieldName<Schema_2>;
-        value: NonNullable<DefaultValue<Schema_2>>;
-        validated?: boolean | undefined;
-    }) => ReplaceControl<Schema_2>;
-    reorder: <Schema_3>(payload: {
-        name: FieldName<Schema_3 extends any[] ? Schema_3 : any>;
-        from: number;
-        to: number;
-    }) => ReorderControl<Schema_3 extends any[] ? Schema_3 : any>;
-    remove: <Schema_4>(payload: {
-        name: FieldName<Schema_4 extends any[] ? Schema_4 : any>;
-        index: number;
-    }) => RemoveControl<Schema_4 extends any[] ? Schema_4 : any>;
-    insert: <Schema_5>(payload: {
-        name: FieldName<Schema_5 extends any[] ? Schema_5 : any>;
-        defaultValue?: ((Schema_5 extends any[] ? Schema_5 : any) extends infer T ? T extends (Schema_5 extends any[] ? Schema_5 : any) ? T extends (infer Item)[] ? DefaultValue<Item> : never : never : never) | undefined;
-        index?: number | undefined;
-    }) => InsertControl<Schema_5 extends any[] ? Schema_5 : any>;
-};