@formisch/solid 0.1.1 → 0.3.0

package/dist/index.jsx

@@ -104,6 +104,7 @@ function copyItemState(fromInternalFieldStore, toInternalFieldStore) {
 }
 function resetItemState(internalFieldStore, initialInput) {
   batch(() => {
+    internalFieldStore.errors.value = null;
     if (internalFieldStore.kind === "array") {
       internalFieldStore.isTouched.value = false;
       internalFieldStore.isDirty.value = false;
@@ -260,6 +261,7 @@ function setFieldInput(internalFieldStore, input) {
     } else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) setFieldInput(internalFieldStore.children[key], input[key]);
     else {
       internalFieldStore.input.value = input;
+      internalFieldStore.isTouched.value = true;
       const startInput = untrack(() => internalFieldStore.startInput.value);
       internalFieldStore.isDirty.value = startInput !== input && (startInput !== void 0 || input !== "" && !Number.isNaN(input));
     }
@@ -288,12 +290,12 @@ function walkFieldStore(internalFieldStore, callback) {
   if (internalFieldStore.kind === "array") for (let index = 0; index < untrack(() => internalFieldStore.items.value).length; index++) walkFieldStore(internalFieldStore.children[index], callback);
   else if (internalFieldStore.kind === "object") for (const key in internalFieldStore.children) walkFieldStore(internalFieldStore.children[key], callback);
 }
-function createFormStore(config, validate2) {
+function createFormStore(config, parse) {
   const store = {};
   initializeFieldStore(store, config.schema, config.initialInput, []);
-  store.validateOn = config.validateOn ?? "submit";
-  store.revalidateOn = config.revalidateOn ?? "input";
-  store.validate = validate2;
+  store.validate = config.validate ?? "submit";
+  store.revalidate = config.revalidate ?? "input";
+  store.parse = parse;
   store.isSubmitting = createSignal(false);
   store.isSubmitted = createSignal(false);
   store.isValidating = createSignal(false);
@@ -302,7 +304,7 @@ function createFormStore(config, validate2) {
 async function validateFormInput(internalFormStore, config) {
   internalFormStore.validators++;
   internalFormStore.isValidating.value = true;
-  const result = await internalFormStore.validate(untrack(() => getFieldInput(internalFormStore)));
+  const result = await internalFormStore.parse(untrack(() => getFieldInput(internalFormStore)));
   let rootErrors;
   let nestedErrors;
   if (result.issues) {
@@ -342,7 +344,7 @@ async function validateFormInput(internalFormStore, config) {
   return result;
 }
 function validateIfRequired(internalFormStore, internalFieldStore, validationModes) {
-  if (validationModes === (internalFormStore.validateOn === "initial" || (internalFormStore.validateOn === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidateOn : internalFormStore.validateOn)) validateFormInput(internalFormStore);
+  if (validationModes === (internalFormStore.validate === "initial" || (internalFormStore.validate === "submit" ? untrack(() => internalFormStore.isSubmitted.value) : untrack(() => getFieldBool(internalFieldStore, "errors"))) ? internalFormStore.revalidate : internalFormStore.validate)) validateFormInput(internalFormStore);
 }
 var INTERNAL = "~internal";
 
@@ -365,6 +367,22 @@ function getErrors(form, config) {
 function getInput(form, config) {
   return getFieldInput(config?.path ? getFieldStore(form[INTERNAL], config.path) : form[INTERNAL]);
 }
+function handleSubmit(form, handler) {
+  return async (event) => {
+    event.preventDefault();
+    const internalFormStore = form[INTERNAL];
+    internalFormStore.isSubmitted.value = true;
+    internalFormStore.isSubmitting.value = true;
+    try {
+      const result = await validateFormInput(internalFormStore, { shouldFocus: true });
+      if (result.success) await handler(result.output, event);
+    } catch (error) {
+      internalFormStore.errors.value = [error instanceof Error ? error.message : "An unknown error has occurred."];
+    } finally {
+      internalFormStore.isSubmitting.value = false;
+    }
+  };
+}
 function insert(form, config) {
   const internalFormStore = form[INTERNAL];
   const internalArrayStore = getFieldStore(internalFormStore, config.path);
@@ -456,7 +474,7 @@ function reset(form, config) {
       });
       if (!config?.path) {
         if (!config?.keepSubmitted) internalFormStore.isSubmitted.value = false;
-        if (internalFormStore.validateOn === "initial") validateFormInput(internalFormStore);
+        if (internalFormStore.validate === "initial") validateFormInput(internalFormStore);
       }
     });
   });
@@ -468,7 +486,6 @@ function setInput(form, config) {
   batch(() => {
     const internalFormStore = form[INTERNAL];
     const internalFieldStore = config.path ? getFieldStore(internalFormStore, config.path) : internalFormStore;
-    setFieldBool(internalFieldStore, "isTouched", true);
     setFieldInput(internalFieldStore, config.input);
     validateIfRequired(internalFormStore, internalFieldStore, "input");
   });
@@ -497,12 +514,22 @@ function validate(form, config) {
 }
 
 // src/primitives/createForm/createForm.ts
+import { createMemo } from "solid-js";
 import * as v2 from "valibot";
 function createForm(config) {
   const internalFormStore = createFormStore(
     config,
     async (input) => v2.safeParseAsync(config.schema, input)
   );
+  const getIsTouched = createMemo(
+    () => getFieldBool(internalFormStore, "isTouched")
+  );
+  const getIsDirty = createMemo(
+    () => getFieldBool(internalFormStore, "isDirty")
+  );
+  const getIsValid = createMemo(
+    () => !getFieldBool(internalFormStore, "errors")
+  );
   const form = {
     [INTERNAL]: internalFormStore,
     get isSubmitting() {
@@ -515,26 +542,26 @@ function createForm(config) {
       return internalFormStore.isValidating.value;
     },
     get isTouched() {
-      return getFieldBool(internalFormStore, "isTouched");
+      return getIsTouched();
     },
     get isDirty() {
-      return getFieldBool(internalFormStore, "isDirty");
+      return getIsDirty();
     },
     get isValid() {
-      return !getFieldBool(internalFormStore, "errors");
+      return getIsValid();
     },
     get errors() {
       return internalFormStore.errors.value;
     }
   };
-  if (config.validateOn === "initial") {
+  if (config.validate === "initial") {
     validateFormInput(form[INTERNAL]);
   }
   return form;
 }
 
 // src/primitives/useField/useField.ts
-import { createMemo, onCleanup } from "solid-js";
+import { createMemo as createMemo2, onCleanup } from "solid-js";
 
 // src/utils/unwrap/unwrap.ts
 function unwrap(value) {
@@ -546,28 +573,38 @@ function unwrap(value) {
 
 // src/primitives/useField/useField.ts
 function useField(form, config) {
-  const getInternalFormStore = createMemo(() => unwrap(form)[INTERNAL]);
-  const getInternalFieldStore = createMemo(
+  const getInternalFormStore = createMemo2(() => unwrap(form)[INTERNAL]);
+  const getInternalFieldStore = createMemo2(
     () => getFieldStore(getInternalFormStore(), unwrap(config).path)
   );
+  const getInput2 = createMemo2(() => getFieldInput(getInternalFieldStore()));
+  const getIsTouched = createMemo2(
+    () => getFieldBool(getInternalFieldStore(), "isTouched")
+  );
+  const getIsDirty = createMemo2(
+    () => getFieldBool(getInternalFieldStore(), "isDirty")
+  );
+  const getIsValid = createMemo2(
+    () => !getFieldBool(getInternalFieldStore(), "errors")
+  );
   return {
     get path() {
       return unwrap(config).path;
     },
     get input() {
-      return getFieldInput(getInternalFieldStore());
+      return getInput2();
     },
     get errors() {
       return getInternalFieldStore().errors.value;
     },
     get isTouched() {
-      return getFieldBool(getInternalFieldStore(), "isTouched");
+      return getIsTouched();
     },
     get isDirty() {
-      return getFieldBool(getInternalFieldStore(), "isDirty");
+      return getIsDirty();
     },
     get isValid() {
-      return !getFieldBool(getInternalFieldStore(), "errors");
+      return getIsValid();
     },
     props: {
       get name() {
@@ -594,11 +631,10 @@ function useField(form, config) {
       },
       onInput(event) {
         const internalFieldStore = getInternalFieldStore();
-        const nextValue = getElementInput(
-          event.currentTarget,
-          internalFieldStore
+        setFieldInput(
+          internalFieldStore,
+          getElementInput(event.currentTarget, internalFieldStore)
         );
-        setFieldInput(internalFieldStore, nextValue);
         validateIfRequired(getInternalFormStore(), internalFieldStore, "input");
       },
       onChange() {
@@ -620,14 +656,23 @@ function useField(form, config) {
 }
 
 // src/primitives/useFieldArray/useFieldArray.ts
-import { createMemo as createMemo2 } from "solid-js";
+import { createMemo as createMemo3 } from "solid-js";
 function useFieldArray(form, config) {
-  const getInternalFieldStore = createMemo2(
+  const getInternalFieldStore = createMemo3(
     () => getFieldStore(
       unwrap(form)[INTERNAL],
       unwrap(config).path
     )
   );
+  const getIsTouched = createMemo3(
+    () => getFieldBool(getInternalFieldStore(), "isTouched")
+  );
+  const getIsDirty = createMemo3(
+    () => getFieldBool(getInternalFieldStore(), "isDirty")
+  );
+  const getIsValid = createMemo3(
+    () => !getFieldBool(getInternalFieldStore(), "errors")
+  );
   return {
     get path() {
       return unwrap(config).path;
@@ -639,35 +684,33 @@ function useFieldArray(form, config) {
       return getInternalFieldStore().errors.value;
     },
     get isTouched() {
-      return getFieldBool(getInternalFieldStore(), "isTouched");
+      return getIsTouched();
     },
     get isDirty() {
-      return getFieldBool(getInternalFieldStore(), "isDirty");
+      return getIsDirty();
     },
     get isValid() {
-      return !getFieldBool(getInternalFieldStore(), "errors");
+      return getIsValid();
     }
   };
 }
 
 // src/components/Field/Field.tsx
 function Field(props) {
-  const field = useField(() => props.of, {
-    get path() {
-      return props.path;
-    }
-  });
-  return <>{props.render(field)}</>;
+  const field = useField(
+    () => props.of,
+    () => ({ path: props.path })
+  );
+  return <>{props.children(field)}</>;
 }
 
 // src/components/FieldArray/FieldArray.tsx
 function FieldArray(props) {
-  const field = useFieldArray(() => props.of, {
-    get path() {
-      return props.path;
-    }
-  });
-  return <>{props.render(field)}</>;
+  const field = useFieldArray(
+    () => props.of,
+    () => ({ path: props.path })
+  );
+  return <>{props.children(field)}</>;
 }
 
 // src/components/Form/Form.tsx
@@ -680,26 +723,7 @@ function Form(props) {
     ref={(element) => {
       props.of[INTERNAL].element = element;
     }}
-    onSubmit={async (event) => {
-      event.preventDefault();
-      const internalFormStore = props.of[INTERNAL];
-      internalFormStore.isSubmitted.value = true;
-      internalFormStore.isSubmitting.value = true;
-      try {
-        const result = await validateFormInput(internalFormStore, {
-          shouldFocus: true
-        });
-        if (result.success) {
-          await props.onSubmit(result.output, event);
-        }
-      } catch (error) {
-        internalFormStore.errors.value = [
-          error instanceof Error ? error.message : "An unknown error has occurred."
-        ];
-      } finally {
-        internalFormStore.isSubmitting.value = false;
-      }
-    }}
+    onSubmit={(event) => handleSubmit(props.of, props.onSubmit)(event)}
   />;
 }
 export {
@@ -711,6 +735,7 @@ export {
   getAllErrors,
   getErrors,
   getInput,
+  handleSubmit,
   insert,
   move,
   remove,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@formisch/solid",
   "description": "The modular and type-safe form library for SolidJS",
-  "version": "0.1.1",
+  "version": "0.3.0",
   "license": "MIT",
   "author": "Fabian Hiller",
   "homepage": "https://formisch.dev",
@@ -11,13 +11,10 @@
   },
   "keywords": [
     "solidjs",
-    "modular",
+    "form",
     "typescript",
     "schema",
-    "validation",
-    "parsing",
-    "bundle-size",
-    "type-safe"
+    "validation"
   ],
   "type": "module",
   "main": "./dist/index.js",
@@ -48,8 +45,7 @@
   },
   "scripts": {
     "test": "vitest --typecheck",
-    "coverage": "vitest run --coverage --isolate",
-    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit && deno check ./src/index.ts",
+    "lint": "eslint \"src/**/*.ts*\" && tsc --noEmit",
     "lint.fix": "eslint \"src/**/*.ts*\" --fix",
     "format": "prettier --write ./src",
     "format.check": "prettier --check ./src",