@conform-to/dom 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Edmund Hung
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,42 @@
+# @conform-to/dom
+
+> A set of opinionated helpers interacting with the DOM elements
+
+## API Reference
+
+- [createControlButton](#createControlButton)
+- [createFieldConfig](#createFieldConfig)
+- [getFieldElements](#getFieldElements)
+- [getName](#getName)
+- [getPaths](#getPaths)
+- [isFieldElement](#isFieldElement)
+- [parse](#parse)
+- [reportValidity](#reportValidity)
+- [setFieldState](#setFieldState)
+- [shouldSkipValidate](#shouldSkipValidate)
+- [setFieldState](#setFieldState)
+- [transform](#transform)
+
+### createControlButton
+
+### createFieldConfig
+
+### getFieldElements
+
+### getName
+
+### getPaths
+
+### isFieldElement
+
+### isFieldsetElement
+
+### parse
+
+### reportValidity
+
+### setFieldState
+
+### shouldSkipValidate
+
+### transform

package/index.d.ts

@@ -0,0 +1,84 @@
+export declare type Constraint<Type> = (Type extends string | number | Date | undefined ? {
+    required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    min?: string;
+    max?: string;
+    step?: string;
+    multiple?: boolean;
+    pattern?: string;
+} : {}) & (undefined extends Type ? {
+    required?: false;
+} : {
+    required: true;
+}) & (Type extends Array<any> ? {
+    multiple: true;
+} : {
+    multiple?: false;
+});
+export interface FieldConfig<Type = any> {
+    name: string;
+    initialValue?: FieldsetData<Type, string>;
+    error?: FieldsetData<Type, string>;
+    form?: string;
+    constraint?: Constraint<Type>;
+}
+export declare type Schema<Type extends Record<string, any>> = {
+    fields: {
+        [Key in keyof Type]-?: Constraint<Type[Key]>;
+    };
+    validate?: (element: FieldsetElement) => void;
+};
+/**
+ * Data structure of the form value
+ */
+export declare type FieldsetData<Type, Value> = Type extends string | number | Date | undefined ? Value : Type extends Array<infer InnerType> ? Array<FieldsetData<InnerType, Value>> : Type extends Object ? {
+    [Key in keyof Type]?: FieldsetData<Type[Key], Value>;
+} : unknown;
+/**
+ * Element that maintains a list of fields
+ * i.e. fieldset.elements
+ */
+export declare type FieldsetElement = HTMLFormElement | HTMLFieldSetElement;
+/**
+ * Element type that might be a candiate of Constraint Validation
+ */
+export declare type FieldElement = HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+export declare type FormResult<T> = {
+    state: 'processed';
+    value: FieldsetData<T, string> | null;
+    error: FieldsetData<T, string> | null;
+} | {
+    state: 'rejected';
+    value: FieldsetData<T, string> | null;
+    error: FieldsetData<T, string>;
+} | {
+    state: 'accepted';
+    value: T;
+};
+export declare function isFieldsetElement(element: unknown): element is FieldsetElement;
+export declare function isFieldElement(element: unknown): element is FieldElement;
+export declare function setFieldState(field: unknown, state: {
+    touched: boolean;
+}): void;
+export declare function reportValidity(fieldset: FieldsetElement): boolean;
+export declare function createFieldConfig<Type extends Record<string, any>>(schema: Schema<Type>, options: {
+    name?: string;
+    form?: string;
+    initialValue?: FieldsetData<Type, string>;
+    error?: FieldsetData<Type, string>;
+}): {
+    [Key in keyof Type]-?: FieldConfig<Type[Key]>;
+};
+export declare function shouldSkipValidate(event: SubmitEvent): boolean;
+export declare function getPaths(name?: string): Array<string | number>;
+export declare function getName(paths: Array<string | number>): string;
+export declare function transform(entries: Array<[string, FormDataEntryValue]> | Iterable<[string, FormDataEntryValue]>): unknown;
+export declare function createControlButton(name: string, action: 'prepend' | 'append' | 'remove', data: any): {
+    type: 'submit';
+    name: string;
+    value: string;
+    formNoValidate: boolean;
+};
+export declare function parse(payload: FormData | URLSearchParams): FormResult<unknown>;
+export declare function getFieldElements(fieldset: FieldsetElement, key: string): FieldElement[];

package/index.js

@@ -0,0 +1,253 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+/**
+ * Data structure of the form value
+ */
+
+/**
+ * Element that maintains a list of fields
+ * i.e. fieldset.elements
+ */
+
+/**
+ * Element type that might be a candiate of Constraint Validation
+ */
+function isFieldsetElement(element) {
+  return element instanceof Element && (element.tagName === 'FORM' || element.tagName === 'FIELDSET');
+}
+function isFieldElement(element) {
+  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
+}
+function setFieldState(field, state) {
+  if (isFieldsetElement(field)) {
+    for (var _element of field.elements) {
+      setFieldState(_element, state);
+    }
+
+    return;
+  }
+
+  if (!isFieldElement(field)) {
+    console.warn('Only input/select/textarea/button element can be touched');
+    return;
+  }
+
+  if (state.touched) {
+    field.dataset.touched = 'true';
+  } else {
+    delete field.dataset.touched;
+  }
+}
+function reportValidity(fieldset) {
+  var isValid = true;
+
+  for (var field of fieldset.elements) {
+    if (isFieldElement(field) && field.dataset.touched && !field.checkValidity()) {
+      isValid = false;
+    }
+  }
+
+  return isValid;
+}
+function createFieldConfig(schema, options) {
+  var result = {};
+
+  for (var key of Object.keys(schema.fields)) {
+    var _options$initialValue, _options$error;
+
+    var constraint = schema.fields[key];
+    var config = {
+      name: options.name ? "".concat(options.name, ".").concat(key) : key,
+      form: options.form,
+      initialValue: (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue[key],
+      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key],
+      // @ts-expect-error
+      constraint
+    };
+    result[key] = config;
+  }
+
+  return result;
+}
+function shouldSkipValidate(event) {
+  var _event$submitter, _event$submitter2;
+
+  if (((_event$submitter = event.submitter) === null || _event$submitter === void 0 ? void 0 : _event$submitter.tagName) === 'BUTTON' || ((_event$submitter2 = event.submitter) === null || _event$submitter2 === void 0 ? void 0 : _event$submitter2.tagName) === 'INPUT') {
+    return event.submitter.formNoValidate;
+  }
+
+  return false;
+}
+function getPaths(name) {
+  var pattern = /(\w+)\[(\d+)\]/;
+
+  if (!name) {
+    return [];
+  }
+
+  return name.split('.').flatMap(key => {
+    var matches = pattern.exec(key);
+
+    if (!matches) {
+      return key;
+    }
+
+    return [matches[1], Number(matches[2])];
+  });
+}
+function getName(paths) {
+  return paths.reduce((name, path) => {
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+
+    if (typeof path === 'number') {
+      return "".concat(name, "[").concat(path, "]");
+    }
+
+    return [name, path].join('.');
+  }, '');
+}
+function transform(entries) {
+  var result = {};
+
+  for (var [key, value] of entries) {
+    var paths = getPaths(key);
+    var length = paths.length;
+    var lastIndex = length - 1;
+    var index = -1;
+    var pointer = result;
+
+    while (pointer != null && ++index < length) {
+      var _key = paths[index];
+      var next = paths[index + 1];
+      var newValue = value;
+
+      if (index != lastIndex) {
+        var _pointer$_key;
+
+        newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {};
+      } // if (typeof pointer[key] !== 'undefined') {
+      // 	pointer[key] = Array.isArray(pointer[key])
+      // 		? pointer[key].concat(newValue)
+      // 		: [pointer[key], newValue];
+      // } else {
+
+
+      pointer[_key] = newValue; // }
+
+      pointer = pointer[_key];
+    }
+  }
+
+  return result;
+}
+function createControlButton(name, action, data) {
+  return {
+    type: 'submit',
+    name: '__conform__',
+    value: [name, action, JSON.stringify(data)].join('::'),
+    formNoValidate: true
+  };
+}
+function parse(payload) {
+  var command = payload.get('__conform__');
+
+  if (command) {
+    payload.delete('__conform__');
+  }
+
+  var value = transform(payload.entries());
+
+  if (command) {
+    try {
+      if (command instanceof File) {
+        throw new Error('The __conform__ key is reserved for special command and could not be used for file upload.');
+      }
+
+      var [name, action, json] = command.split('::');
+      var list = value;
+
+      for (var path of getPaths(name)) {
+        list = list[path];
+
+        if (typeof list === 'undefined') {
+          break;
+        }
+      }
+
+      if (!Array.isArray(list)) {
+        throw new Error('');
+      }
+
+      switch (action) {
+        case 'prepend':
+          {
+            var initialValue = JSON.parse(json);
+            list.unshift(initialValue);
+            break;
+          }
+
+        case 'append':
+          {
+            var _initialValue = JSON.parse(json);
+
+            list.push(_initialValue);
+            break;
+          }
+
+        case 'remove':
+          var {
+            index
+          } = JSON.parse(json);
+          list.splice(index, 1);
+          break;
+
+        default:
+          throw new Error('Invalid action found; Only `prepend`, `append` and `remove` is accepted');
+      }
+    } catch (e) {
+      return {
+        state: 'rejected',
+        value,
+        error: {
+          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        }
+      };
+    }
+
+    return {
+      state: 'processed',
+      value,
+      error: null
+    };
+  }
+
+  return {
+    state: 'accepted',
+    value
+  };
+}
+function getFieldElements(fieldset, key) {
+  var _fieldset$name;
+
+  var name = getName([(_fieldset$name = fieldset.name) !== null && _fieldset$name !== void 0 ? _fieldset$name : '', key]);
+  var item = fieldset.elements.namedItem(name);
+  var nodes = item instanceof RadioNodeList ? Array.from(item) : item !== null ? [item] : [];
+  return nodes.filter(isFieldElement);
+}
+
+exports.createControlButton = createControlButton;
+exports.createFieldConfig = createFieldConfig;
+exports.getFieldElements = getFieldElements;
+exports.getName = getName;
+exports.getPaths = getPaths;
+exports.isFieldElement = isFieldElement;
+exports.isFieldsetElement = isFieldsetElement;
+exports.parse = parse;
+exports.reportValidity = reportValidity;
+exports.setFieldState = setFieldState;
+exports.shouldSkipValidate = shouldSkipValidate;
+exports.transform = transform;

package/module/index.js

@@ -0,0 +1,238 @@
+/**
+ * Data structure of the form value
+ */
+
+/**
+ * Element that maintains a list of fields
+ * i.e. fieldset.elements
+ */
+
+/**
+ * Element type that might be a candiate of Constraint Validation
+ */
+function isFieldsetElement(element) {
+  return element instanceof Element && (element.tagName === 'FORM' || element.tagName === 'FIELDSET');
+}
+function isFieldElement(element) {
+  return element instanceof Element && (element.tagName === 'INPUT' || element.tagName === 'SELECT' || element.tagName === 'TEXTAREA' || element.tagName === 'BUTTON');
+}
+function setFieldState(field, state) {
+  if (isFieldsetElement(field)) {
+    for (var _element of field.elements) {
+      setFieldState(_element, state);
+    }
+
+    return;
+  }
+
+  if (!isFieldElement(field)) {
+    console.warn('Only input/select/textarea/button element can be touched');
+    return;
+  }
+
+  if (state.touched) {
+    field.dataset.touched = 'true';
+  } else {
+    delete field.dataset.touched;
+  }
+}
+function reportValidity(fieldset) {
+  var isValid = true;
+
+  for (var field of fieldset.elements) {
+    if (isFieldElement(field) && field.dataset.touched && !field.checkValidity()) {
+      isValid = false;
+    }
+  }
+
+  return isValid;
+}
+function createFieldConfig(schema, options) {
+  var result = {};
+
+  for (var key of Object.keys(schema.fields)) {
+    var _options$initialValue, _options$error;
+
+    var constraint = schema.fields[key];
+    var config = {
+      name: options.name ? "".concat(options.name, ".").concat(key) : key,
+      form: options.form,
+      initialValue: (_options$initialValue = options.initialValue) === null || _options$initialValue === void 0 ? void 0 : _options$initialValue[key],
+      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key],
+      // @ts-expect-error
+      constraint
+    };
+    result[key] = config;
+  }
+
+  return result;
+}
+function shouldSkipValidate(event) {
+  var _event$submitter, _event$submitter2;
+
+  if (((_event$submitter = event.submitter) === null || _event$submitter === void 0 ? void 0 : _event$submitter.tagName) === 'BUTTON' || ((_event$submitter2 = event.submitter) === null || _event$submitter2 === void 0 ? void 0 : _event$submitter2.tagName) === 'INPUT') {
+    return event.submitter.formNoValidate;
+  }
+
+  return false;
+}
+function getPaths(name) {
+  var pattern = /(\w+)\[(\d+)\]/;
+
+  if (!name) {
+    return [];
+  }
+
+  return name.split('.').flatMap(key => {
+    var matches = pattern.exec(key);
+
+    if (!matches) {
+      return key;
+    }
+
+    return [matches[1], Number(matches[2])];
+  });
+}
+function getName(paths) {
+  return paths.reduce((name, path) => {
+    if (name === '' || path === '') {
+      return [name, path].join('');
+    }
+
+    if (typeof path === 'number') {
+      return "".concat(name, "[").concat(path, "]");
+    }
+
+    return [name, path].join('.');
+  }, '');
+}
+function transform(entries) {
+  var result = {};
+
+  for (var [key, value] of entries) {
+    var paths = getPaths(key);
+    var length = paths.length;
+    var lastIndex = length - 1;
+    var index = -1;
+    var pointer = result;
+
+    while (pointer != null && ++index < length) {
+      var _key = paths[index];
+      var next = paths[index + 1];
+      var newValue = value;
+
+      if (index != lastIndex) {
+        var _pointer$_key;
+
+        newValue = (_pointer$_key = pointer[_key]) !== null && _pointer$_key !== void 0 ? _pointer$_key : typeof next === 'number' ? [] : {};
+      } // if (typeof pointer[key] !== 'undefined') {
+      // 	pointer[key] = Array.isArray(pointer[key])
+      // 		? pointer[key].concat(newValue)
+      // 		: [pointer[key], newValue];
+      // } else {
+
+
+      pointer[_key] = newValue; // }
+
+      pointer = pointer[_key];
+    }
+  }
+
+  return result;
+}
+function createControlButton(name, action, data) {
+  return {
+    type: 'submit',
+    name: '__conform__',
+    value: [name, action, JSON.stringify(data)].join('::'),
+    formNoValidate: true
+  };
+}
+function parse(payload) {
+  var command = payload.get('__conform__');
+
+  if (command) {
+    payload.delete('__conform__');
+  }
+
+  var value = transform(payload.entries());
+
+  if (command) {
+    try {
+      if (command instanceof File) {
+        throw new Error('The __conform__ key is reserved for special command and could not be used for file upload.');
+      }
+
+      var [name, action, json] = command.split('::');
+      var list = value;
+
+      for (var path of getPaths(name)) {
+        list = list[path];
+
+        if (typeof list === 'undefined') {
+          break;
+        }
+      }
+
+      if (!Array.isArray(list)) {
+        throw new Error('');
+      }
+
+      switch (action) {
+        case 'prepend':
+          {
+            var initialValue = JSON.parse(json);
+            list.unshift(initialValue);
+            break;
+          }
+
+        case 'append':
+          {
+            var _initialValue = JSON.parse(json);
+
+            list.push(_initialValue);
+            break;
+          }
+
+        case 'remove':
+          var {
+            index
+          } = JSON.parse(json);
+          list.splice(index, 1);
+          break;
+
+        default:
+          throw new Error('Invalid action found; Only `prepend`, `append` and `remove` is accepted');
+      }
+    } catch (e) {
+      return {
+        state: 'rejected',
+        value,
+        error: {
+          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        }
+      };
+    }
+
+    return {
+      state: 'processed',
+      value,
+      error: null
+    };
+  }
+
+  return {
+    state: 'accepted',
+    value
+  };
+}
+function getFieldElements(fieldset, key) {
+  var _fieldset$name;
+
+  var name = getName([(_fieldset$name = fieldset.name) !== null && _fieldset$name !== void 0 ? _fieldset$name : '', key]);
+  var item = fieldset.elements.namedItem(name);
+  var nodes = item instanceof RadioNodeList ? Array.from(item) : item !== null ? [item] : [];
+  return nodes.filter(isFieldElement);
+}
+
+export { createControlButton, createFieldConfig, getFieldElements, getName, getPaths, isFieldElement, isFieldsetElement, parse, reportValidity, setFieldState, shouldSkipValidate, transform };

package/package.json

@@ -0,0 +1,29 @@
+{
+	"name": "@conform-to/dom",
+	"description": "A set of opinionated helpers built on top of the Constraint Validation API",
+	"license": "MIT",
+	"version": "0.1.0",
+	"main": "index.js",
+	"module": "module/index.js",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/edmundhung/conform",
+		"directory": "packages/conform-dom"
+	},
+	"author": {
+		"name": "Edmund Hung",
+		"email": "me@edmund.dev",
+		"url": "https://edmund.dev"
+	},
+	"bugs": {
+		"url": "https://github.com/edmundhung/conform/issues"
+	},
+	"keywords": [
+		"constraint-validation",
+		"form",
+		"form-validation",
+		"validation",
+		"dom"
+	],
+	"sideEffects": false
+}