@conform-to/dom 0.1.1 → 0.2.0

package/README.md

@@ -4,8 +4,8 @@
 
 ## API Reference
 
-- [createControlButton](#createControlButton)
-- [createFieldConfig](#createFieldConfig)
+- [getControlButtonProps](#getControlButtonProps)
+- [getFieldProps](#getFieldProps)
 - [getFieldElements](#getFieldElements)
 - [getName](#getName)
 - [getPaths](#getPaths)
@@ -17,9 +17,9 @@
 - [setFieldState](#setFieldState)
 - [transform](#transform)
 
-### createControlButton
+### getControlButtonProps
 
-### createFieldConfig
+### getFieldProps
 
 ### getFieldElements
 

package/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+exports.defineProperty = _defineProperty;
+exports.objectSpread2 = _objectSpread2;

package/index.d.ts

@@ -2,18 +2,17 @@ export declare type Constraint = {
     required?: boolean;
     minLength?: number;
     maxLength?: number;
-    min?: string;
-    max?: string;
+    min?: string | number;
+    max?: string | number;
     step?: string;
     multiple?: boolean;
     pattern?: string;
 };
-export interface FieldConfig<Type = any> {
+export interface FieldProps<Type = any> extends Constraint {
     name: string;
-    initialValue?: FieldsetData<Type, string>;
+    defaultValue?: FieldsetData<Type, string>;
     error?: FieldsetData<Type, string>;
     form?: string;
-    constraint?: Constraint;
 }
 export declare type Schema<Type extends Record<string, any>> = {
     fields: {
@@ -24,7 +23,7 @@ export declare type Schema<Type extends Record<string, any>> = {
 /**
  * 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 ? {
+export declare type FieldsetData<Type, Value> = Type extends string | number | Date | boolean | undefined ? Value : Type extends Array<infer InnerType> ? Array<FieldsetData<InnerType, Value>> : Type extends Object ? {
     [Key in keyof Type]?: FieldsetData<Type[Key], Value>;
 } : unknown;
 /**
@@ -36,41 +35,65 @@ 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;
+export interface FormState<T> {
+    value: FieldsetData<T, string>;
+    error: FieldsetData<T, string>;
+}
+export declare type Submission<T extends Record<string, unknown>> = {
+    state: 'modified';
+    form: FormState<T>;
 } | {
     state: 'rejected';
-    value: FieldsetData<T, string> | null;
-    error: FieldsetData<T, string>;
+    form: FormState<T>;
 } | {
     state: 'accepted';
-    value: T;
+    data: T;
+    form: FormState<T>;
 };
+export interface ControlButtonProps {
+    type: 'submit';
+    name: string;
+    value: string;
+    formNoValidate: boolean;
+}
+export interface ControlAction<T = unknown> {
+    prepend: {
+        defaultValue: T;
+    };
+    append: {
+        defaultValue: T;
+    };
+    replace: {
+        defaultValue: T;
+        index: number;
+    };
+    remove: {
+        index: number;
+    };
+    reorder: {
+        from: number;
+        to: number;
+    };
+}
 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: {
+export declare function getFieldProps<Type extends Record<string, any>>(schema: Schema<Type>, options: {
     name?: string;
     form?: string;
-    initialValue?: FieldsetData<Type, string>;
+    defaultValue?: FieldsetData<Type, string>;
     error?: FieldsetData<Type, string>;
 }): {
-    [Key in keyof Type]-?: FieldConfig<Type[Key]>;
+    [Key in keyof Type]-?: FieldProps<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 transform(entries: Array<[string, FormDataEntryValue]> | Iterable<[string, FormDataEntryValue]>): Record<string, unknown>;
+export declare function getControlButtonProps<Action extends keyof ControlAction, Payload extends ControlAction[Action]>(name: string, action: Action, payload: Payload): ControlButtonProps;
+export declare function applyControlCommand<Type, Action extends keyof ControlAction<Type>, Payload extends ControlAction<Type>[Action]>(list: Array<Type>, action: Action | string, payload: Payload): Array<Type>;
+export declare function parse(payload: FormData | URLSearchParams): Submission<Record<string, unknown>>;
 export declare function getFieldElements(fieldset: FieldsetElement, key: string): FieldElement[];

package/index.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('./_virtual/_rollupPluginBabelHelpers.js');
+
 /**
  * Data structure of the form value
  */
@@ -51,21 +53,22 @@ function reportValidity(fieldset) {
 
   return isValid;
 }
-function createFieldConfig(schema, options) {
+function getFieldProps(schema, options) {
   var result = {};
 
   for (var key of Object.keys(schema.fields)) {
-    var _options$initialValue, _options$error;
+    var _options$defaultValue, _options$error;
 
     var constraint = schema.fields[key];
-    var config = {
+
+    var props = _rollupPluginBabelHelpers.objectSpread2({
       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],
-      constraint
-    };
-    result[key] = config;
+      defaultValue: (_options$defaultValue = options.defaultValue) === null || _options$defaultValue === void 0 ? void 0 : _options$defaultValue[key],
+      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key]
+    }, constraint);
+
+    result[key] = props;
   }
 
   return result;
@@ -143,14 +146,65 @@ function transform(entries) {
 
   return result;
 }
-function createControlButton(name, action, data) {
+function getControlButtonProps(name, action, payload) {
   return {
     type: 'submit',
     name: '__conform__',
-    value: [name, action, JSON.stringify(data)].join('::'),
+    value: [name, action, JSON.stringify(payload)].join('::'),
     formNoValidate: true
   };
 }
+function applyControlCommand(list, action, payload) {
+  switch (action) {
+    case 'prepend':
+      {
+        var {
+          defaultValue
+        } = payload;
+        list.unshift(defaultValue);
+        break;
+      }
+
+    case 'append':
+      {
+        var {
+          defaultValue: _defaultValue
+        } = payload;
+        list.push(_defaultValue);
+        break;
+      }
+
+    case 'replace':
+      {
+        var {
+          defaultValue: _defaultValue2,
+          index: _index
+        } = payload;
+        list.splice(_index, 1, _defaultValue2);
+        break;
+      }
+
+    case 'remove':
+      var {
+        index
+      } = payload;
+      list.splice(index, 1);
+      break;
+
+    case 'reorder':
+      var {
+        from,
+        to
+      } = payload;
+      list.splice(to, 0, ...list.splice(from, 1));
+      break;
+
+    default:
+      throw new Error('Invalid action found');
+  }
+
+  return list;
+}
 function parse(payload) {
   var command = payload.get('__conform__');
 
@@ -181,52 +235,35 @@ function parse(payload) {
         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');
-      }
+      applyControlCommand(list, action, JSON.parse(json));
     } catch (e) {
       return {
         state: 'rejected',
-        value,
-        error: {
-          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        form: {
+          value,
+          error: {
+            __conform__: e instanceof Error ? e.message : 'Something went wrong'
+          }
         }
       };
     }
 
     return {
-      state: 'processed',
-      value,
-      error: null
+      state: 'modified',
+      form: {
+        value,
+        error: {}
+      }
     };
   }
 
   return {
     state: 'accepted',
-    value
+    data: value,
+    form: {
+      value,
+      error: {}
+    }
   };
 }
 function getFieldElements(fieldset, key) {
@@ -238,9 +275,10 @@ function getFieldElements(fieldset, key) {
   return nodes.filter(isFieldElement);
 }
 
-exports.createControlButton = createControlButton;
-exports.createFieldConfig = createFieldConfig;
+exports.applyControlCommand = applyControlCommand;
+exports.getControlButtonProps = getControlButtonProps;
 exports.getFieldElements = getFieldElements;
+exports.getFieldProps = getFieldProps;
 exports.getName = getName;
 exports.getPaths = getPaths;
 exports.isFieldElement = isFieldElement;

package/module/_virtual/_rollupPluginBabelHelpers.js

@@ -0,0 +1,42 @@
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
+
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
+
+  return keys;
+}
+
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+export { _defineProperty as defineProperty, _objectSpread2 as objectSpread2 };

package/module/index.js

@@ -1,3 +1,5 @@
+import { objectSpread2 as _objectSpread2 } from './_virtual/_rollupPluginBabelHelpers.js';
+
 /**
  * Data structure of the form value
  */
@@ -47,21 +49,22 @@ function reportValidity(fieldset) {
 
   return isValid;
 }
-function createFieldConfig(schema, options) {
+function getFieldProps(schema, options) {
   var result = {};
 
   for (var key of Object.keys(schema.fields)) {
-    var _options$initialValue, _options$error;
+    var _options$defaultValue, _options$error;
 
     var constraint = schema.fields[key];
-    var config = {
+
+    var props = _objectSpread2({
       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],
-      constraint
-    };
-    result[key] = config;
+      defaultValue: (_options$defaultValue = options.defaultValue) === null || _options$defaultValue === void 0 ? void 0 : _options$defaultValue[key],
+      error: (_options$error = options.error) === null || _options$error === void 0 ? void 0 : _options$error[key]
+    }, constraint);
+
+    result[key] = props;
   }
 
   return result;
@@ -139,14 +142,65 @@ function transform(entries) {
 
   return result;
 }
-function createControlButton(name, action, data) {
+function getControlButtonProps(name, action, payload) {
   return {
     type: 'submit',
     name: '__conform__',
-    value: [name, action, JSON.stringify(data)].join('::'),
+    value: [name, action, JSON.stringify(payload)].join('::'),
     formNoValidate: true
   };
 }
+function applyControlCommand(list, action, payload) {
+  switch (action) {
+    case 'prepend':
+      {
+        var {
+          defaultValue
+        } = payload;
+        list.unshift(defaultValue);
+        break;
+      }
+
+    case 'append':
+      {
+        var {
+          defaultValue: _defaultValue
+        } = payload;
+        list.push(_defaultValue);
+        break;
+      }
+
+    case 'replace':
+      {
+        var {
+          defaultValue: _defaultValue2,
+          index: _index
+        } = payload;
+        list.splice(_index, 1, _defaultValue2);
+        break;
+      }
+
+    case 'remove':
+      var {
+        index
+      } = payload;
+      list.splice(index, 1);
+      break;
+
+    case 'reorder':
+      var {
+        from,
+        to
+      } = payload;
+      list.splice(to, 0, ...list.splice(from, 1));
+      break;
+
+    default:
+      throw new Error('Invalid action found');
+  }
+
+  return list;
+}
 function parse(payload) {
   var command = payload.get('__conform__');
 
@@ -177,52 +231,35 @@ function parse(payload) {
         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');
-      }
+      applyControlCommand(list, action, JSON.parse(json));
     } catch (e) {
       return {
         state: 'rejected',
-        value,
-        error: {
-          __conform__: e instanceof Error ? e.message : 'Something went wrong'
+        form: {
+          value,
+          error: {
+            __conform__: e instanceof Error ? e.message : 'Something went wrong'
+          }
         }
       };
     }
 
     return {
-      state: 'processed',
-      value,
-      error: null
+      state: 'modified',
+      form: {
+        value,
+        error: {}
+      }
     };
   }
 
   return {
     state: 'accepted',
-    value
+    data: value,
+    form: {
+      value,
+      error: {}
+    }
   };
 }
 function getFieldElements(fieldset, key) {
@@ -234,4 +271,4 @@ function getFieldElements(fieldset, key) {
   return nodes.filter(isFieldElement);
 }
 
-export { createControlButton, createFieldConfig, getFieldElements, getName, getPaths, isFieldElement, isFieldsetElement, parse, reportValidity, setFieldState, shouldSkipValidate, transform };
+export { applyControlCommand, getControlButtonProps, getFieldElements, getFieldProps, getName, getPaths, isFieldElement, isFieldsetElement, parse, reportValidity, setFieldState, shouldSkipValidate, transform };

package/package.json

@@ -2,7 +2,7 @@
 	"name": "@conform-to/dom",
 	"description": "A set of opinionated helpers built on top of the Constraint Validation API",
 	"license": "MIT",
-	"version": "0.1.1",
+	"version": "0.2.0",
 	"main": "index.js",
 	"module": "module/index.js",
 	"repository": {