@formisch/solid 0.1.1 → 0.3.0

package/dist/index.d.ts

@@ -78,15 +78,15 @@ type ValidationMode = "initial" | "touch" | "input" | "change" | "blur" | "submi
 interface FormConfig<TSchema extends Schema = Schema> {
   readonly schema: TSchema;
   readonly initialInput?: DeepPartial<v.InferInput<TSchema>> | undefined;
-  readonly validateOn?: ValidationMode | undefined;
-  readonly revalidateOn?: Exclude<ValidationMode, "initial"> | undefined;
+  readonly validate?: ValidationMode | undefined;
+  readonly revalidate?: Exclude<ValidationMode, "initial"> | undefined;
 }
 interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObjectStore {
   element?: HTMLFormElement;
   validators: number;
-  validateOn: ValidationMode;
-  revalidateOn: Exclude<ValidationMode, "initial">;
-  validate: (input: unknown) => Promise<v.SafeParseResult<TSchema>>;
+  validate: ValidationMode;
+  revalidate: Exclude<ValidationMode, "initial">;
+  parse: (input: unknown) => Promise<v.SafeParseResult<TSchema>>;
   isSubmitting: Signal<boolean>;
   isSubmitted: Signal<boolean>;
   isValidating: Signal<boolean>;
@@ -94,7 +94,7 @@ interface InternalFormStore<TSchema extends Schema = Schema> extends InternalObj
 interface BaseFormStore<TSchema extends Schema = Schema> {
   [INTERNAL]: InternalFormStore<TSchema>;
 }
-type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<void>;
+type SubmitHandler<TSchema extends Schema> = (output: v.InferOutput<TSchema>, event: SubmitEvent) => MaybePromise<unknown>;
 //#endregion
 //#region src/types/path.d.ts
 /**
@@ -124,16 +124,16 @@ type MergeUnion<T> = { [K in KeyOf<T>]: T extends Record<K, infer V> ? V : never
 /**
 * Lazily evaluate only the first valid path segment based on the given value.
 */
-type LazyPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValidPath : TPathToCheck extends readonly [infer TFirstKey extends KeyOf<TValue>, ...infer TPathRest extends Path] ? LazyPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOf<TValue>> extends false ? readonly [...TValidPath, KeyOf<TValue>] : TValidPath;
+type LazyPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValidPath : TPathToCheck extends readonly [infer TFirstKey extends KeyOf<TValue>, ...infer TPathRest extends Path] ? LazyPath<Required<MergeUnion<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOf<TValue>> extends false ? readonly [...TValidPath, KeyOf<TValue>] : TValidPath;
 /**
 * Returns the path if valid, otherwise the first possible valid path based on
 * the given value.
 */
-type ValidPath<TValue, TPath extends RequiredPath> = TPath extends LazyPath<TValue, TPath> ? TPath : LazyPath<TValue, TPath>;
+type ValidPath<TValue, TPath extends RequiredPath> = TPath extends LazyPath<Required<TValue>, TPath> ? TPath : LazyPath<Required<TValue>, TPath>;
 /**
 * Extracts the value type at the given path.
 */
-type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends KeyOf<TValue> ? PathValue<MergeUnion<TValue>[TKey], TRest> : unknown : TValue;
+type PathValue<TValue, TPath extends Path> = TPath extends readonly [infer TKey, ...infer TRest extends Path] ? TKey extends KeyOf<Required<TValue>> ? PathValue<MergeUnion<Required<TValue>>[TKey], TRest> : unknown : TValue;
 /**
 * Checks if a value is an array or contains one.
 */
@@ -141,16 +141,16 @@ type IsOrHasArray<TValue> = IsAny<TValue> extends true ? false : TValue extends
 /**
 * Extracts the exact keys of a tuple, array or object that contain arrays.
 */
-type KeyOfArrayPath<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly (infer TItem)[] ? number extends TValue["length"] ? IsOrHasArray<TItem> extends true ? number : never : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? IsOrHasArray<TValue[TKey]> extends true ? TIndex : never : never }[number] : TValue extends Record<string, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<TValue[TKey]> extends true ? TKey : never }[keyof TValue] & PathKey : never;
+type KeyOfArrayPath<TValue> = IsAny<TValue> extends true ? never : TValue extends readonly (infer TItem)[] ? number extends TValue["length"] ? IsOrHasArray<TItem> extends true ? number : never : { [TKey in keyof TValue]: TKey extends `${infer TIndex extends number}` ? IsOrHasArray<NonNullable<TValue[TKey]>> extends true ? TIndex : never : never }[number] : TValue extends Record<string, unknown> ? { [TKey in keyof TValue]: IsOrHasArray<NonNullable<TValue[TKey]>> extends true ? TKey : never }[keyof TValue] & PathKey : never;
 /**
 * Lazily evaluate only the first valid array path segment based on the given value.
 */
-type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, KeyOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends KeyOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<MergeUnion<TValue>[TFirstKey], TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOfArrayPath<TValue>> extends false ? readonly [...TValidPath, KeyOfArrayPath<TValue>] : never;
+type LazyArrayPath<TValue, TPathToCheck extends Path, TValidPath extends Path = readonly []> = TPathToCheck extends readonly [] ? TValue extends readonly unknown[] ? TValidPath : readonly [...TValidPath, KeyOfArrayPath<TValue>] : TPathToCheck extends readonly [infer TFirstKey extends KeyOfArrayPath<TValue>, ...infer TPathRest extends Path] ? LazyArrayPath<Required<MergeUnion<TValue>[TFirstKey]>, TPathRest, readonly [...TValidPath, TFirstKey]> : IsNever<KeyOfArrayPath<TValue>> extends false ? readonly [...TValidPath, KeyOfArrayPath<TValue>] : never;
 /**
 * Returns the path if valid, otherwise the first possible valid array path based on
 * the given value.
 */
-type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<TValue, TPath> ? TPath : LazyArrayPath<TValue, TPath>;
+type ValidArrayPath<TValue, TPath extends RequiredPath> = TPath extends LazyArrayPath<Required<TValue>, TPath> ? TPath : LazyArrayPath<Required<TValue>, TPath>;
 //#endregion
 //#region src/array/copyItemState/copyItemState.d.ts
 /**
@@ -194,6 +194,9 @@ interface GetFieldInputConfig<TSchema extends Schema, TFieldPath extends Require
 declare function getInput<TSchema extends Schema>(form: BaseFormStore<TSchema>): PartialValues<v.InferInput<TSchema>>;
 declare function getInput<TSchema extends Schema, TFieldPath extends RequiredPath | undefined = undefined>(form: BaseFormStore<TSchema>, config: TFieldPath extends RequiredPath ? GetFieldInputConfig<TSchema, TFieldPath> : GetFormInputConfig): PartialValues<TFieldPath extends RequiredPath ? PathValue<v.InferInput<TSchema>, TFieldPath> : v.InferInput<TSchema>>;
 //#endregion
+//#region src/handleSubmit/handleSubmit.d.ts
+declare function handleSubmit<TSchema extends Schema>(form: BaseFormStore<TSchema>, handler: SubmitHandler<TSchema>): (event: SubmitEvent) => void;
+//#endregion
 //#region src/insert/insert.d.ts
 interface InsertConfig<TSchema extends Schema, TFieldArrayPath extends RequiredPath> {
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
@@ -346,7 +349,7 @@ type MaybeGetter<TValue> = TValue | (() => TValue);
 interface FieldProps<TSchema extends Schema = Schema, TFieldPath extends RequiredPath = RequiredPath> {
   readonly of: FormStore<TSchema>;
   readonly path: ValidPath<v.InferInput<TSchema>, TFieldPath>;
-  readonly render: (store: FieldStore<TSchema, TFieldPath>) => JSX.Element;
+  readonly children: (store: FieldStore<TSchema, TFieldPath>) => JSX.Element;
 }
 /**
 * Headless form field that provides reactive properties and state.
@@ -360,7 +363,7 @@ declare function Field<TSchema extends Schema, TFieldPath extends RequiredPath>(
 interface FieldArrayProps<TSchema extends Schema = Schema, TFieldArrayPath extends RequiredPath = RequiredPath> {
   readonly of: FormStore<TSchema>;
   readonly path: ValidArrayPath<v.InferInput<TSchema>, TFieldArrayPath>;
-  readonly render: (store: FieldArrayStore<TSchema, TFieldArrayPath>) => JSX.Element;
+  readonly children: (store: FieldArrayStore<TSchema, TFieldArrayPath>) => JSX.Element;
 }
 /**
 * Headless field array that provides reactive properties and state.
@@ -390,4 +393,4 @@ interface UseFieldArrayConfig<TSchema extends Schema = Schema, TFieldArrayPath e
 }
 declare function useFieldArray<TSchema extends Schema, TFieldArrayPath extends RequiredPath>(form: MaybeGetter<FormStore<TSchema>>, config: MaybeGetter<UseFieldArrayConfig<TSchema, TFieldArrayPath>>): FieldArrayStore<TSchema, TFieldArrayPath>;
 //#endregion
-export { Field, FieldArray, FieldArrayProps, FieldArrayStore, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MaybeGetter, MoveConfig, RemoveConfig, ReplaceConfig, ResetFieldConfig, ResetFormConfig, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, SwapConfig, UseFieldArrayConfig, UseFieldConfig, ValidateFormConfig, createForm, focus, getAllErrors, getErrors, getInput, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };
+export { Field, FieldArray, FieldArrayProps, FieldArrayStore, FieldElementProps, FieldProps, FieldStore, FocusFieldConfig, Form, FormProps, FormStore, GetFieldErrorsConfig, GetFieldInputConfig, GetFormErrorsConfig, GetFormInputConfig, InsertConfig, MaybeGetter, MoveConfig, RemoveConfig, ReplaceConfig, ResetFieldConfig, ResetFormConfig, SetFieldErrorsConfig, SetFieldInputConfig, SetFormErrorsConfig, SetFormInputConfig, type SubmitHandler, SwapConfig, UseFieldArrayConfig, UseFieldConfig, ValidateFormConfig, createForm, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };

package/dist/index.js

@@ -106,6 +106,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;
@@ -262,6 +263,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));
     }
@@ -290,12 +292,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);
@@ -304,7 +306,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) {
@@ -344,7 +346,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";
 
@@ -367,6 +369,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);
@@ -458,7 +476,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);
       }
     });
   });
@@ -470,7 +488,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");
   });
@@ -502,6 +519,15 @@ function createForm(config) {
     config,
     async (input) => v.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() {
@@ -514,19 +540,19 @@ 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;
@@ -546,24 +572,34 @@ function useField(form, config) {
   const getInternalFieldStore = createMemo(
     () => getFieldStore(getInternalFormStore(), unwrap(config).path)
   );
+  const getInput2 = createMemo(() => getFieldInput(getInternalFieldStore()));
+  const getIsTouched = createMemo(
+    () => getFieldBool(getInternalFieldStore(), "isTouched")
+  );
+  const getIsDirty = createMemo(
+    () => getFieldBool(getInternalFieldStore(), "isDirty")
+  );
+  const getIsValid = createMemo(
+    () => !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() {
@@ -590,11 +626,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() {
@@ -621,6 +656,15 @@ function useFieldArray(form, config) {
       unwrap(config).path
     )
   );
+  const getIsTouched = createMemo(
+    () => getFieldBool(getInternalFieldStore(), "isTouched")
+  );
+  const getIsDirty = createMemo(
+    () => getFieldBool(getInternalFieldStore(), "isDirty")
+  );
+  const getIsValid = createMemo(
+    () => !getFieldBool(getInternalFieldStore(), "errors")
+  );
   return {
     get path() {
       return unwrap(config).path;
@@ -632,33 +676,29 @@ 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 memo(() => props.render(field));
+  const field = useField(() => props.of, () => ({
+    path: props.path
+  }));
+  return memo(() => props.children(field));
 }
 function FieldArray(props) {
-  const field = useFieldArray(() => props.of, {
-    get path() {
-      return props.path;
-    }
-  });
-  return memo(() => props.render(field));
+  const field = useFieldArray(() => props.of, () => ({
+    path: props.path
+  }));
+  return memo(() => props.children(field));
 }
 var _tmpl$ = /* @__PURE__ */ template(`<form>`);
 function Form(props) {
@@ -670,27 +710,10 @@ function Form(props) {
     }, _el$);
     spread(_el$, mergeProps(other, {
       "novalidate": true,
-      "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)
     }), false, false);
     return _el$;
   })();
 }
 
-export { Field, FieldArray, Form, createForm, focus, getAllErrors, getErrors, getInput, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };
+export { Field, FieldArray, Form, createForm, focus, getAllErrors, getErrors, getInput, handleSubmit, insert, move, remove, replace, reset, setErrors, setInput, submit, swap, useField, useFieldArray, validate };