@conform-to/dom 0.6.0 → 0.6.2

package/dom.d.ts

@@ -0,0 +1,55 @@
+export type FormControl = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+export type Submitter = HTMLInputElement | HTMLButtonElement;
+/**
+ * A type guard to check if the provided reference is a form control element, including
+ * `input`, `select`, `textarea` or `button`
+ */
+export declare function isFormControl(element: unknown): element is FormControl;
+/**
+ * A type guard to check if the provided reference is a focusable form control element.
+ */
+export declare function isFocusableFormControl(element: unknown): element is FormControl;
+/**
+ * Resolves the form action based on the submit event
+ */
+export declare function getFormAction(event: SubmitEvent): string;
+/**
+ * Resolves the form encoding type based on the submit event
+ */
+export declare function getFormEncType(event: SubmitEvent): 'application/x-www-form-urlencoded' | 'multipart/form-data';
+/**
+ * Resolves the form method based on the submit event
+ */
+export declare function getFormMethod(event: SubmitEvent): 'get' | 'post' | 'put' | 'patch' | 'delete';
+/**
+ * Resolve the form element
+ */
+export declare function getFormElement(element: HTMLFormElement | HTMLFieldSetElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null): HTMLFormElement | null;
+/**
+ * Returns a list of form control elements in the form
+ */
+export declare function getFormControls(form: HTMLFormElement): FormControl[];
+/**
+ * A function to create a submitter button element
+ */
+export declare function createSubmitter(config: {
+    name: string;
+    value: string;
+    hidden?: boolean;
+    formAction?: string;
+    formEnctype?: ReturnType<typeof getFormEncType>;
+    formMethod?: ReturnType<typeof getFormMethod>;
+    formNoValidate?: boolean;
+}): HTMLButtonElement;
+/**
+ * Trigger form submission with a submitter.
+ */
+export declare function requestSubmit(form: HTMLFormElement, submitter: Submitter | null): void;
+/**
+ * Focus on the first invalid form control in the form
+ */
+export declare function focusFirstInvalidControl(form: HTMLFormElement): void;
+/**
+ * Focus on the first form control with the provided name
+ */
+export declare function focusFormControl(form: HTMLFormElement, name: string): void;

package/dom.js

@@ -0,0 +1,169 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A type guard to check if the provided reference is a form control element, including
+ * `input`, `select`, `textarea` or `button`
+ */
+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 reference is a focusable form control element.
+ */
+function isFocusableFormControl(element) {
+  return isFormControl(element) && element.willValidate && element.type !== 'submit';
+}
+
+/**
+ * Resolves the form action based on the submit event
+ */
+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 form encoding type based on the submit event
+ */
+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 (['application/x-www-form-urlencoded', 'multipart/form-data'].includes(encType)) {
+    return encType;
+  }
+  return 'application/x-www-form-urlencoded';
+}
+
+/**
+ * Resolves the form method based on the submit event
+ */
+function getFormMethod(event) {
+  var _submitter$getAttribu3;
+  var form = event.target;
+  var submitter = event.submitter;
+  var method = (_submitter$getAttribu3 = submitter === null || submitter === void 0 ? void 0 : submitter.getAttribute('formmethod')) !== null && _submitter$getAttribu3 !== void 0 ? _submitter$getAttribu3 : form.getAttribute('method');
+  if (['get', 'post', 'put', 'patch', 'delete'].includes(method)) {
+    return method;
+  }
+  return 'get';
+}
+
+/**
+ * Resolve the form element
+ */
+function getFormElement(element) {
+  var form = element instanceof HTMLFormElement ? element : element === null || element === void 0 ? void 0 : element.form;
+  if (!form) {
+    return null;
+  }
+  return form;
+}
+
+/**
+ * Returns a list of form control elements in the form
+ */
+function getFormControls(form) {
+  var formControls = [];
+  for (var element of form.elements) {
+    if (isFormControl(element)) {
+      formControls.push(element);
+    }
+  }
+  return formControls;
+}
+
+/**
+ * A function to create a submitter button element
+ */
+function createSubmitter(config) {
+  var button = document.createElement('button');
+  button.name = config.name;
+  button.value = config.value;
+  if (config.hidden) {
+    button.hidden = true;
+  }
+  if (config.formAction) {
+    button.formAction = config.formAction;
+  }
+  if (config.formEnctype) {
+    button.formEnctype = config.formEnctype;
+  }
+  if (config.formMethod) {
+    button.formMethod = config.formMethod;
+  }
+  if (config.formNoValidate) {
+    button.formNoValidate = true;
+  }
+  return button;
+}
+
+/**
+ * Trigger form submission with a submitter.
+ */
+function requestSubmit(form, submitter) {
+  var shouldRemoveSubmitter = false;
+  if (submitter && !submitter.isConnected) {
+    shouldRemoveSubmitter = true;
+    form.appendChild(submitter);
+  }
+  if (typeof form.requestSubmit === 'function') {
+    form.requestSubmit(submitter);
+  } else {
+    var event = new SubmitEvent('submit', {
+      bubbles: true,
+      cancelable: true,
+      submitter
+    });
+    form.dispatchEvent(event);
+  }
+  if (submitter && shouldRemoveSubmitter) {
+    form.removeChild(submitter);
+  }
+}
+
+/**
+ * Focus on the first invalid form control in the form
+ */
+function focusFirstInvalidControl(form) {
+  for (var element of form.elements) {
+    if (isFocusableFormControl(element) && !element.validity.valid) {
+      element.focus();
+      break;
+    }
+  }
+}
+
+/**
+ * Focus on the first form control with the provided name
+ */
+function focusFormControl(form, name) {
+  var element = form.elements.namedItem(name);
+  if (!element) {
+    return;
+  }
+  if (element instanceof RadioNodeList) {
+    element = element.item(0);
+  }
+  if (isFocusableFormControl(element)) {
+    element.focus();
+  }
+}
+
+exports.createSubmitter = createSubmitter;
+exports.focusFirstInvalidControl = focusFirstInvalidControl;
+exports.focusFormControl = focusFormControl;
+exports.getFormAction = getFormAction;
+exports.getFormControls = getFormControls;
+exports.getFormElement = getFormElement;
+exports.getFormEncType = getFormEncType;
+exports.getFormMethod = getFormMethod;
+exports.isFocusableFormControl = isFocusableFormControl;
+exports.isFormControl = isFormControl;
+exports.requestSubmit = requestSubmit;

package/formdata.d.ts

@@ -0,0 +1,39 @@
+/**
+ * A ponyfill-like helper to get the form data with the submitter value.
+ * It does not respect the tree order nor handles the image input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#parameters
+ */
+export declare function getFormData(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): FormData;
+/**
+ * Returns the paths from a name based on the JS syntax convention
+ * @example
+ * ```js
+ * const paths = getPaths('todos[0].content'); // ['todos', 0, 'content']
+ * ```
+ */
+export declare function getPaths(name: string): Array<string | number>;
+/**
+ * Returns a formatted name from the paths based on the JS syntax convention
+ * @example
+ * ```js
+ * const name = formatPaths(['todos', 0, 'content']); // "todos[0].content"
+ * ```
+ */
+export declare function formatPaths(paths: Array<string | number>): string;
+/**
+ * Assign a value to a target object by following the paths on the name
+ */
+export declare function setValue(target: any, name: string, valueFn: (prev?: unknown) => any): void;
+/**
+ * Resolves the payload into a plain object based on the JS syntax convention
+ */
+export declare function resolve(payload: FormData | URLSearchParams): {};
+/**
+ * Format the error messages into a validation message
+ */
+export declare function getValidationMessage(errors?: string | string[]): string;
+/**
+ * Retrieve the error messages from the validation message
+ */
+export declare function getErrors(validationMessage: string | undefined): string[];

package/formdata.js

@@ -0,0 +1,127 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * A ponyfill-like helper to get the form data with the submitter value.
+ * It does not respect the tree order nor handles the image input.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData#parameters
+ */
+
+function getFormData(form, submitter) {
+  var payload = new FormData(form);
+  if (submitter && submitter.type === 'submit' && submitter.name !== '') {
+    payload.append(submitter.name, submitter.value);
+  }
+  return payload;
+}
+
+/**
+ * Returns the paths from a name based on the JS syntax convention
+ * @example
+ * ```js
+ * const paths = getPaths('todos[0].content'); // ['todos', 0, 'content']
+ * ```
+ */
+function getPaths(name) {
+  var pattern = /(\w*)\[(\d+)\]/;
+  if (!name) {
+    return [];
+  }
+  return name.split('.').flatMap(key => {
+    var matches = pattern.exec(key);
+    if (!matches) {
+      return key;
+    }
+    if (matches[1] === '') {
+      return Number(matches[2]);
+    }
+    return [matches[1], Number(matches[2])];
+  });
+}
+
+/**
+ * Returns a formatted name from the paths based on the JS syntax convention
+ * @example
+ * ```js
+ * const name = formatPaths(['todos', 0, 'content']); // "todos[0].content"
+ * ```
+ */
+function formatPaths(paths) {
+  return paths.reduce((name, path) => {
+    if (typeof path === 'number') {
+      return "".concat(name, "[").concat(path, "]");
+    }
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+    return [name, path].join('.');
+  }, '');
+}
+
+/**
+ * Assign a value to a target object by following the paths on the name
+ */
+function setValue(target, name, valueFn) {
+  var paths = getPaths(name);
+  var length = paths.length;
+  var lastIndex = length - 1;
+  var index = -1;
+  var pointer = target;
+  while (pointer != null && ++index < length) {
+    var _pointer$key;
+    var key = paths[index];
+    var next = paths[index + 1];
+    var newValue = index != lastIndex ? (_pointer$key = pointer[key]) !== null && _pointer$key !== void 0 ? _pointer$key : typeof next === 'number' ? [] : {} : valueFn(pointer[key]);
+    pointer[key] = newValue;
+    pointer = pointer[key];
+  }
+}
+
+/**
+ * Resolves the payload into a plain object based on the JS syntax convention
+ */
+function resolve(payload) {
+  var data = {};
+  var _loop = function _loop(value) {
+    setValue(data, name, prev => {
+      if (!prev) {
+        return value;
+      } else if (Array.isArray(prev)) {
+        return prev.concat(value);
+      } else {
+        return [prev, value];
+      }
+    });
+  };
+  for (var [name, value] of payload.entries()) {
+    _loop(value);
+  }
+  return data;
+}
+
+/**
+ * Format the error messages into a validation message
+ */
+function getValidationMessage(errors) {
+  return [].concat(errors !== null && errors !== void 0 ? errors : []).join(String.fromCharCode(31));
+}
+
+/**
+ * Retrieve the error messages from the validation message
+ */
+function getErrors(validationMessage) {
+  if (!validationMessage) {
+    return [];
+  }
+  return validationMessage.split(String.fromCharCode(31));
+}
+
+exports.formatPaths = formatPaths;
+exports.getErrors = getErrors;
+exports.getFormData = getFormData;
+exports.getPaths = getPaths;
+exports.getValidationMessage = getValidationMessage;
+exports.resolve = resolve;
+exports.setValue = setValue;

package/index.d.ts

@@ -1,202 +1,5 @@
-export type Primitive = null | undefined | string | number | boolean | Date;
-export type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
-export interface FieldConfig<Schema = unknown> extends FieldConstraint<Schema> {
-    id?: string;
-    name: string;
-    defaultValue?: FieldValue<Schema>;
-    initialError?: Record<string, string | string[]>;
-    form?: string;
-    errorId?: string;
-    /**
-     * The frist error of the field
-     */
-    error?: string;
-    /**
-     * All of the field errors
-     */
-    errors?: string[];
-}
-export type FieldValue<Schema> = Schema extends Primitive ? string : Schema extends File ? File : Schema extends Array<infer InnerType> ? Array<FieldValue<InnerType>> : Schema extends Record<string, any> ? {
-    [Key in keyof Schema]?: FieldValue<Schema[Key]>;
-} : any;
-export type FieldConstraint<Schema = any> = {
-    required?: boolean;
-    minLength?: number;
-    maxLength?: number;
-    min?: Schema extends number ? number : string | number;
-    max?: Schema extends number ? number : string | number;
-    step?: Schema extends number ? number : string | number;
-    multiple?: boolean;
-    pattern?: string;
-};
-export type FieldsetConstraint<Schema extends Record<string, any>> = {
-    [Key in keyof Schema]?: FieldConstraint<Schema[Key]>;
-};
-export type Submission<Schema extends Record<string, any> | unknown = unknown> = unknown extends Schema ? {
-    intent: string;
-    payload: Record<string, any>;
-    error: Record<string, string | string[]>;
-} : {
-    intent: string;
-    payload: Record<string, any>;
-    value?: Schema;
-    error: Record<string, string | string[]>;
-    toJSON(): Submission;
-};
-export interface IntentButtonProps {
-    name: typeof INTENT;
-    value: string;
-    formNoValidate?: boolean;
-}
-/**
- * Check if the provided reference is a form element (_input_ / _select_ / _textarea_ or _button_)
- */
-export declare function isFieldElement(element: unknown): element is FieldElement;
-/**
- * Find the corresponding paths based on the formatted name
- * @param name formatted name
- * @returns paths
- */
-export declare function getPaths(name: string): Array<string | number>;
-export declare function getFormData(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): FormData;
-export type FormMethod = 'get' | 'post' | 'put' | 'patch' | 'delete';
-export type FormEncType = 'application/x-www-form-urlencoded' | 'multipart/form-data';
-export declare function getFormAttributes(form: HTMLFormElement, submitter?: HTMLInputElement | HTMLButtonElement | null): {
-    action: string;
-    encType: FormEncType;
-    method: FormMethod;
-};
-export declare function getName(paths: Array<string | number>): string;
-export declare function getScope(intent: string): string | null;
-export declare function isFocusedOnIntentButton(form: HTMLFormElement, intent: string): boolean;
-export declare function getValidationMessage(errors?: string | string[]): string;
-export declare function getErrors(message: string | undefined): string[];
-export declare const FORM_ERROR_ELEMENT_NAME = "__form__";
-export declare const INTENT = "__intent__";
-export declare const VALIDATION_UNDEFINED = "__undefined__";
-export declare const VALIDATION_SKIPPED = "__skipped__";
-export declare function reportSubmission(form: HTMLFormElement, submission: Submission): void;
-export declare function setValue<T>(target: any, paths: Array<string | number>, valueFn: (prev?: T) => T): void;
-/**
- * Creates an intent button on demand and trigger a form submit by clicking it.
- */
-export declare function requestIntent(form: HTMLFormElement | undefined, buttonProps: {
-    value: string;
-    formNoValidate?: boolean;
-}): void;
-/**
- * Returns the properties required to configure an intent button for validation
- *
- * @see https://conform.guide/api/react#validate
- */
-export declare function validate(field?: string): IntentButtonProps;
-export declare function getFormElement(element: HTMLFormElement | HTMLFieldSetElement | HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement | null): HTMLFormElement | null;
-export declare function parse(payload: FormData | URLSearchParams): Submission;
-export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
-    resolve?: (payload: Record<string, any>, intent: string) => {
-        value: Schema;
-    } | {
-        error: Record<string, string | string[]>;
-    };
-}): Submission<Schema>;
-export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
-    resolve?: (payload: Record<string, any>, intent: string) => Promise<{
-        value: Schema;
-    } | {
-        error: Record<string, string | string[]>;
-    }>;
-}): Promise<Submission<Schema>>;
-export declare function parse<Schema>(payload: FormData | URLSearchParams, options?: {
-    resolve?: (payload: Record<string, any>, intent: string) => ({
-        value: Schema;
-    } | {
-        error: Record<string, string | string[]>;
-    }) | Promise<{
-        value: Schema;
-    } | {
-        error: Record<string, string | string[]>;
-    }>;
-}): Submission<Schema> | Promise<Submission<Schema>>;
-export type ListCommand<Schema = unknown> = {
-    type: 'prepend';
-    scope: string;
-    payload: {
-        defaultValue: Schema;
-    };
-} | {
-    type: 'append';
-    scope: string;
-    payload: {
-        defaultValue: Schema;
-    };
-} | {
-    type: 'replace';
-    scope: string;
-    payload: {
-        defaultValue: Schema;
-        index: number;
-    };
-} | {
-    type: 'remove';
-    scope: string;
-    payload: {
-        index: number;
-    };
-} | {
-    type: 'reorder';
-    scope: string;
-    payload: {
-        from: number;
-        to: number;
-    };
-};
-export declare function parseListCommand<Schema = unknown>(intent: string): ListCommand<Schema> | null;
-export declare function updateList<Schema>(list: Array<Schema>, command: ListCommand<Schema>): Array<Schema>;
-export interface ListCommandButtonBuilder {
-    append<Schema>(name: string, payload?: {
-        defaultValue: Schema;
-    }): IntentButtonProps;
-    prepend<Schema>(name: string, payload?: {
-        defaultValue: Schema;
-    }): IntentButtonProps;
-    replace<Schema>(name: string, payload: {
-        defaultValue: Schema;
-        index: number;
-    }): IntentButtonProps;
-    remove(name: string, payload: {
-        index: number;
-    }): IntentButtonProps;
-    reorder(name: string, payload: {
-        from: number;
-        to: number;
-    }): IntentButtonProps;
-}
-/**
- * Helpers to configure an intent button for modifying a list
- *
- * @see https://conform.guide/api/react#list
- */
-export declare const list: ListCommandButtonBuilder;
-/**
- * Validate the form with the Constraint Validation API
- * @see https://conform.guide/api/react#validateconstraint
- */
-export declare function validateConstraint(options: {
-    form: HTMLFormElement;
-    formData?: FormData;
-    constraint?: Record<Lowercase<string>, (value: string, context: {
-        formData: FormData;
-        attributeValue: string;
-    }) => boolean>;
-    acceptMultipleErrors?: ({ name, intent, payload, }: {
-        name: string;
-        intent: string;
-        payload: Record<string, any>;
-    }) => boolean;
-    formatMessages?: ({ name, validity, constraint, defaultErrors, }: {
-        name: string;
-        validity: ValidityState;
-        constraint: Record<string, boolean>;
-        defaultErrors: string[];
-    }) => string[];
-}): Submission;
+export { type FormControl as FieldElement, isFormControl as isFieldElement, isFocusableFormControl, getFormAction, getFormControls, getFormElement, getFormEncType, getFormMethod, focusFirstInvalidControl, focusFormControl, createSubmitter, requestSubmit, } from './dom';
+export { formatPaths as getName, getPaths, getFormData, getValidationMessage, getErrors, } from './formdata';
+export { type ListCommand, INTENT, getScope, isSubmitting, validate, list, parseListCommand, updateList, requestIntent, } from './intent';
+export { type Submission, parse } from './parse';
+export { type FieldConstraint, type FieldsetConstraint, type ResolveType, type KeysOf, } from './types';