@formisch/solid 0.9.6 → 0.11.0

package/README.md

@@ -9,6 +9,7 @@ Formisch is also available for [Preact][formisch-preact], [Qwik][formisch-qwik],
 - Small bundle size starting at 2.5 kB
 - Schema-based validation with Valibot
 - Type safety with autocompletion in editor
+- Open source and fully tested with 100 % coverage
 - It's fast – DOM updates are fine-grained
 - Minimal, readable and well thought out API
 - Supports all native HTML form fields
@@ -59,7 +60,13 @@ In addition, Formisch offers several functions (we call them "methods") that can
 
 ## Comparison
 
-What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built. The result is a small bundle size and native performance for any UI update. This feature, along with a few others, distinguishes Formisch from other form libraries. My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms.
+What makes Formisch unique is its framework-agnostic core, which is fully native to the framework you are using. It works by inserting framework-specific reactivity blocks when the core package is built, giving you native performance for any UI update. A modular methods API keeps bundles starting at just ~2.5 kB by only including the methods you import, and end-to-end type safety covers deeply nested paths and field arrays with TypeScript inference that stays fast even as forms grow.
+
+For a side-by-side look at how Formisch compares to Felte and TanStack Form, see the [comparison guide](https://formisch.dev/solid/guides/comparison/).
+
+## Vision
+
+My vision for Formisch is to create a framework-agnostic platform similar to [Vite](https://vite.dev/), but for forms — a shared core that lets the same mental model and codebase work natively across every modern UI framework.
 
 ## Partners
 

package/dist/dev.js

@@ -1,6 +1,6 @@
 import * as v from 'valibot';
 import { untrack, batch, createUniqueId, createMemo, onCleanup, splitProps, createSignal as createSignal$1 } from 'solid-js';
-import { memo, template, use, spread, mergeProps } from 'solid-js/web';
+import { memo, use, spread, mergeProps, template } from 'solid-js/web';
 
 // ../../packages/core/dist/index.solid.js
 var framework = "solid";
@@ -113,29 +113,40 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
     });
   });
 }
-function resetItemState(internalFieldStore, initialInput) {
+function resetItemState(internalFieldStore, input, keepStart = false) {
   batch(() => {
-    internalFieldStore.elements = [];
+    const elements = [];
+    if (internalFieldStore.elements === internalFieldStore.initialElements) internalFieldStore.initialElements = elements;
+    internalFieldStore.elements = elements;
     internalFieldStore.errors.value = null;
     internalFieldStore.isTouched.value = false;
     internalFieldStore.isDirty.value = false;
     if (internalFieldStore.kind === "array" || internalFieldStore.kind === "object") {
-      const objectInput = initialInput == null ? initialInput : true;
-      internalFieldStore.startInput.value = objectInput;
+      const objectInput = input == null ? input : true;
+      if (!keepStart) internalFieldStore.startInput.value = objectInput;
       internalFieldStore.input.value = objectInput;
-      if (internalFieldStore.kind === "array") if (initialInput) {
-        const newItems = initialInput.map(createUniqueId);
-        internalFieldStore.startItems.value = newItems;
+      if (internalFieldStore.kind === "array") if (input) {
+        const length = internalFieldStore.schema.type === "array" ? input.length : internalFieldStore.children.length;
+        const newItems = Array.from({ length }, createUniqueId);
+        if (!keepStart) internalFieldStore.startItems.value = newItems;
         internalFieldStore.items.value = newItems;
-        for (let index = 0; index < initialInput.length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], initialInput[index]);
+        let path;
+        for (let index = 0; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], input[index], keepStart);
+        else {
+          path ??= JSON.parse(internalFieldStore.name);
+          internalFieldStore.children[index] = {};
+          path.push(index);
+          initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, input[index], path);
+          path.pop();
+        }
       } else {
-        internalFieldStore.startItems.value = [];
+        if (!keepStart) internalFieldStore.startItems.value = [];
         internalFieldStore.items.value = [];
       }
-      else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], initialInput?.[key]);
+      else for (const key in internalFieldStore.children) resetItemState(internalFieldStore.children[key], input?.[key], keepStart);
     } else {
-      internalFieldStore.startInput.value = initialInput;
-      internalFieldStore.input.value = initialInput;
+      if (!keepStart) internalFieldStore.startInput.value = input;
+      internalFieldStore.input.value = input;
     }
   });
 }
@@ -192,6 +203,50 @@ function swapItemState(firstInternalFieldStore, secondInternalFieldStore) {
     });
   });
 }
+function focusFieldElement(internalFieldStore) {
+  for (const element of internalFieldStore.elements) {
+    element.focus();
+    if (element.getRootNode().activeElement === element) return true;
+  }
+  return false;
+}
+// @__NO_SIDE_EFFECTS__
+function getFieldBool(internalFieldStore, type) {
+  if (internalFieldStore[type].value) return true;
+  if (internalFieldStore.kind === "array") {
+    for (let index = 0; index < internalFieldStore.items.value.length; index++) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[index], type)) return true;
+    return false;
+  }
+  if (internalFieldStore.kind == "object") {
+    for (const key in internalFieldStore.children) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[key], type)) return true;
+    return false;
+  }
+  return false;
+}
+// @__NO_SIDE_EFFECTS__
+function getDirtyFieldInput(internalFieldStore, dirtyOnly = true) {
+  if (dirtyOnly && !/* @__PURE__ */ getFieldBool(internalFieldStore, "isDirty")) return;
+  if (internalFieldStore.kind === "array") {
+    if (internalFieldStore.input.value) {
+      const value = [];
+      for (let index = 0; index < internalFieldStore.items.value.length; index++) value[index] = /* @__PURE__ */ getDirtyFieldInput(internalFieldStore.children[index], false);
+      return value;
+    }
+    return internalFieldStore.input.value;
+  }
+  if (internalFieldStore.kind === "object") {
+    if (internalFieldStore.input.value) {
+      const value = {};
+      for (const key in internalFieldStore.children) {
+        const child = internalFieldStore.children[key];
+        if (!dirtyOnly || /* @__PURE__ */ getFieldBool(child, "isDirty")) value[key] = /* @__PURE__ */ getDirtyFieldInput(child, dirtyOnly);
+      }
+      return value;
+    }
+    return internalFieldStore.input.value;
+  }
+  return internalFieldStore.input.value;
+}
 // @__NO_SIDE_EFFECTS__
 function getFieldInput(internalFieldStore) {
   if (internalFieldStore.kind === "array") {
@@ -231,19 +286,6 @@ function getElementInput(element, internalFieldStore) {
   return element.value;
 }
 // @__NO_SIDE_EFFECTS__
-function getFieldBool(internalFieldStore, type) {
-  if (internalFieldStore[type].value) return true;
-  if (internalFieldStore.kind === "array") {
-    for (let index = 0; index < internalFieldStore.items.value.length; index++) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[index], type)) return true;
-    return false;
-  }
-  if (internalFieldStore.kind == "object") {
-    for (const key in internalFieldStore.children) if (/* @__PURE__ */ getFieldBool(internalFieldStore.children[key], type)) return true;
-    return false;
-  }
-  return false;
-}
-// @__NO_SIDE_EFFECTS__
 function getFieldStore(internalFormStore, path) {
   let internalFieldStore = internalFormStore;
   for (const key of path) internalFieldStore = internalFieldStore.children[key];
@@ -251,11 +293,9 @@ function getFieldStore(internalFormStore, path) {
 }
 function setFieldBool(internalFieldStore, type, bool) {
   batch(() => {
-    if (internalFieldStore.kind === "array") {
-      internalFieldStore[type].value = bool;
-      for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
-    } else if (internalFieldStore.kind == "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
-    else internalFieldStore[type].value = bool;
+    internalFieldStore[type].value = bool;
+    if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) setFieldBool(internalFieldStore.children[index], type, bool);
+    else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldBool(internalFieldStore.children[key], type, bool);
   });
 }
 function setNestedInput(internalFieldStore, input) {
@@ -263,20 +303,20 @@ function setNestedInput(internalFieldStore, input) {
   if (internalFieldStore.kind === "array") {
     const arrayInput = input ?? [];
     const items = internalFieldStore.items.value;
-    if (arrayInput.length < items.length) internalFieldStore.items.value = items.slice(0, arrayInput.length);
-    else if (arrayInput.length > items.length) {
-      if (arrayInput.length > internalFieldStore.children.length) {
-        const path = JSON.parse(internalFieldStore.name);
-        for (let index = internalFieldStore.children.length; index < arrayInput.length; index++) {
-          internalFieldStore.children[index] = {};
-          path.push(index);
-          initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
-          path.pop();
-        }
+    const length = internalFieldStore.schema.type === "array" ? arrayInput.length : internalFieldStore.children.length;
+    if (length < items.length) internalFieldStore.items.value = items.slice(0, length);
+    else if (length > items.length) {
+      const path = JSON.parse(internalFieldStore.name);
+      for (let index = items.length; index < length; index++) if (internalFieldStore.children[index]) resetItemState(internalFieldStore.children[index], arrayInput[index], true);
+      else {
+        internalFieldStore.children[index] = {};
+        path.push(index);
+        initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, arrayInput[index], path);
+        path.pop();
       }
-      internalFieldStore.items.value = [...items, ...arrayInput.slice(items.length).map(createUniqueId)];
+      internalFieldStore.items.value = [...items, ...Array.from({ length: length - items.length }, createUniqueId)];
     }
-    for (let index = 0; index < arrayInput.length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
+    for (let index = 0; index < length; index++) setNestedInput(internalFieldStore.children[index], arrayInput[index]);
     internalFieldStore.input.value = input == null ? input : true;
     internalFieldStore.isDirty.value = internalFieldStore.startInput.value !== internalFieldStore.input.value || internalFieldStore.startItems.value.length !== internalFieldStore.items.value.length;
   } else if (internalFieldStore.kind === "object") {
@@ -304,21 +344,22 @@ function setFieldInput(internalFormStore, path, input) {
 function setInitialFieldInput(internalFieldStore, initialInput) {
   batch(() => {
     if (internalFieldStore.kind === "array") {
-      internalFieldStore.input.value = initialInput == null ? initialInput : true;
+      internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
       const initialArrayInput = initialInput ?? [];
-      if (initialArrayInput.length > internalFieldStore.children.length) {
+      const length = internalFieldStore.schema.type === "array" ? initialArrayInput.length : internalFieldStore.children.length;
+      if (length > internalFieldStore.children.length) {
         const path = JSON.parse(internalFieldStore.name);
-        for (let index = internalFieldStore.children.length; index < initialArrayInput.length; index++) {
+        for (let index = internalFieldStore.children.length; index < length; index++) {
           internalFieldStore.children[index] = {};
           path.push(index);
           initializeFieldStore(internalFieldStore.children[index], internalFieldStore.schema.item, initialArrayInput[index], path);
           path.pop();
         }
       }
-      internalFieldStore.initialItems.value = initialArrayInput.map(createUniqueId);
+      internalFieldStore.initialItems.value = Array.from({ length }, createUniqueId);
       for (let index = 0; index < internalFieldStore.children.length; index++) setInitialFieldInput(internalFieldStore.children[index], initialArrayInput[index]);
     } else if (internalFieldStore.kind === "object") {
-      internalFieldStore.input.value = initialInput == null ? initialInput : true;
+      internalFieldStore.initialInput.value = initialInput == null ? initialInput : true;
       for (const key in internalFieldStore.children) setInitialFieldInput(internalFieldStore.children[key], initialInput?.[key]);
     } else internalFieldStore.initialInput.value = initialInput;
   });
@@ -343,44 +384,49 @@ function createFormStore(config, parse) {
 async function validateFormInput(internalFormStore, config) {
   internalFormStore.validators++;
   internalFormStore.isValidating.value = true;
-  const result = await internalFormStore.parse(untrack(() => /* @__PURE__ */ getFieldInput(internalFormStore)));
-  let rootErrors;
-  let nestedErrors;
-  if (result.issues) {
-    nestedErrors = {};
-    for (const issue of result.issues) if (issue.path) {
-      const path = [];
-      for (const pathItem of issue.path) {
-        const key = pathItem.key;
-        const keyType = typeof key;
-        const itemType = pathItem.type;
-        if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
-        path.push(key);
-      }
-      const name = JSON.stringify(path);
-      const fieldErrors = nestedErrors[name];
-      if (fieldErrors) fieldErrors.push(issue.message);
-      else nestedErrors[name] = [issue.message];
-    } else if (rootErrors) rootErrors.push(issue.message);
-    else rootErrors = [issue.message];
-  }
-  let shouldFocus = config?.shouldFocus ?? false;
-  batch(() => {
-    walkFieldStore(internalFormStore, (internalFieldStore) => {
-      if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
-      else {
-        const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
-        internalFieldStore.errors.value = fieldErrors;
-        if (shouldFocus && fieldErrors) {
-          internalFieldStore.elements[0]?.focus();
-          shouldFocus = false;
+  try {
+    const result = await internalFormStore.parse(untrack(() => /* @__PURE__ */ getFieldInput(internalFormStore)));
+    let rootErrors;
+    let nestedErrors;
+    if (result.issues) {
+      nestedErrors = {};
+      for (const issue of result.issues) if (issue.path) {
+        const path = [];
+        for (const pathItem of issue.path) {
+          const key = pathItem.key;
+          const keyType = typeof key;
+          const itemType = pathItem.type;
+          if (keyType !== "string" && keyType !== "number" || itemType === "map" || itemType === "set") break;
+          path.push(key);
         }
-      }
+        const name = JSON.stringify(path);
+        const fieldErrors = nestedErrors[name];
+        if (fieldErrors) fieldErrors.push(issue.message);
+        else nestedErrors[name] = [issue.message];
+      } else if (rootErrors) rootErrors.push(issue.message);
+      else rootErrors = [issue.message];
+    }
+    let shouldFocus = config?.shouldFocus ?? false;
+    batch(() => {
+      walkFieldStore(internalFormStore, (internalFieldStore) => {
+        if (internalFieldStore.name === "[]") internalFieldStore.errors.value = rootErrors ?? null;
+        else {
+          const fieldErrors = nestedErrors?.[internalFieldStore.name] ?? null;
+          internalFieldStore.errors.value = fieldErrors;
+          if (shouldFocus && fieldErrors && focusFieldElement(internalFieldStore)) shouldFocus = false;
+        }
+      });
+      internalFormStore.validators--;
+      internalFormStore.isValidating.value = internalFormStore.validators > 0;
     });
-    internalFormStore.validators--;
-    internalFormStore.isValidating.value = internalFormStore.validators > 0;
-  });
-  return result;
+    return result;
+  } catch (error) {
+    batch(() => {
+      internalFormStore.validators--;
+      internalFormStore.isValidating.value = internalFormStore.validators > 0;
+    });
+    throw error;
+  }
 }
 function validateIfRequired(internalFormStore, internalFieldStore, validationMode) {
   if (validationMode === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => /* @__PURE__ */ getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
@@ -389,7 +435,7 @@ var INTERNAL = "~internal";
 
 // ../../packages/methods/dist/index.solid.js
 function focus(form, config) {
-  getFieldStore(form[INTERNAL], config.path).elements[0]?.focus();
+  focusFieldElement(getFieldStore(form[INTERNAL], config.path));
 }
 // @__NO_SIDE_EFFECTS__
 function getAllErrors(form) {
@@ -403,6 +449,17 @@ function getAllErrors(form) {
   return allErrors;
 }
 // @__NO_SIDE_EFFECTS__
+function getDirtyInput(form, config) {
+  return getDirtyFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
+}
+// @__NO_SIDE_EFFECTS__
+function getDirtyPaths(form, config) {
+  config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL];
+  const paths = [];
+  config?.path && [...config.path];
+  return paths;
+}
+// @__NO_SIDE_EFFECTS__
 function getErrors(form, config) {
   return (config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]).errors.value;
 }
@@ -481,6 +538,24 @@ function move(form, config) {
     validateIfRequired(internalFormStore, internalArrayStore, "input");
   });
 }
+// @__NO_SIDE_EFFECTS__
+function pickDirty(form, config) {
+  if (!getFieldBool(form[INTERNAL], "isDirty")) return;
+  const result = /* @__PURE__ */ pickFieldValue(form[INTERNAL], config.from);
+  return Object.keys(result).length ? result : void 0;
+}
+// @__NO_SIDE_EFFECTS__
+function pickFieldValue(internalFieldStore, value) {
+  if (internalFieldStore.kind === "object" && internalFieldStore.input.value && value && typeof value === "object" && !Array.isArray(value)) {
+    const result = {};
+    for (const key in internalFieldStore.children) {
+      const child = internalFieldStore.children[key];
+      if (getFieldBool(child, "isDirty") && key in value) result[key] = /* @__PURE__ */ pickFieldValue(child, value[key]);
+    }
+    return result;
+  }
+  return value;
+}
 function remove(form, config) {
   const internalFormStore = form[INTERNAL];
   const internalArrayStore = getFieldStore(internalFormStore, config.path);
@@ -680,9 +755,13 @@ function useField(form, config) {
         const internalFieldStore = getInternalFieldStore();
         internalFieldStore.elements.push(element);
         onCleanup(() => {
-          internalFieldStore.elements = internalFieldStore.elements.filter(
+          const elements = internalFieldStore.elements.filter(
             (el) => el !== element
           );
+          if (internalFieldStore.elements === internalFieldStore.initialElements) {
+            internalFieldStore.initialElements = elements;
+          }
+          internalFieldStore.elements = elements;
         });
       },
       onFocus() {
@@ -790,4 +869,4 @@ function Form(props) {
   })();
 }
 
-export { Field, FieldArray, Form, createForm, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };
+export { Field, FieldArray, Form, createForm, focus, getAllErrors, getDirtyInput, getDirtyPaths, getErrors, getInput, handleSubmit, insert, move, pickDirty, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };