remix-validated-form 4.4.2 → 4.5.0-beta.1

package/src/internal/state/controlledFields.ts

@@ -1,31 +1,37 @@
 import { useCallback, useEffect } from "react";
 import { InternalFormContextValue } from "../formContext";
 import { useFieldDefaultValue } from "../hooks";
-import { controlledFieldStore } from "./controlledFieldStore";
-import { formStore } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
+import { useControlledFieldStore } from "./controlledFieldStore";
+import { useFormStore } from "./storeHooks";
+import { InternalFormId } from "./types";
 
 export const useControlledFieldValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const useValueStore = controlledFieldStore(context.formId);
-  const value = useValueStore((state) => state.fields[field]?.value);
+  const value = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.value
+  );
 
-  const useFormStore = formStore(context.formId);
-  const isFormHydrated = useFormStore((state) => state.isHydrated);
+  const isFormHydrated = useFormStore(
+    context.formId,
+    (state) => state.isHydrated
+  );
   const defaultValue = useFieldDefaultValue(field, context);
 
-  const isFieldHydrated = useValueStore(
-    (state) => state.fields[field]?.hydrated ?? false
+  const isFieldHydrated = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.hydrated ?? false
+  );
+  const hydrateWithDefault = useControlledFieldStore(
+    (state) => state.hydrateWithDefault
   );
-  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
 
   useEffect(() => {
     if (isFormHydrated && !isFieldHydrated) {
-      hydrateWithDefault(field, defaultValue);
+      hydrateWithDefault(context.formId, field, defaultValue);
     }
   }, [
+    context.formId,
     defaultValue,
     field,
     hydrateWithDefault,
@@ -40,26 +46,26 @@ export const useControllableValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const useValueStore = controlledFieldStore(context.formId);
-
-  const resolveUpdate = useValueStore(
-    (state) => state.fields[field]?.resolveValueUpdate
+  const resolveUpdate = useControlledFieldStore(
+    (state) => state.getField(context.formId, field)?.resolveValueUpdate
   );
   useEffect(() => {
     resolveUpdate?.();
   }, [resolveUpdate]);
 
-  const register = useValueStore((state) => state.register);
-  const unregister = useValueStore((state) => state.unregister);
+  const register = useControlledFieldStore((state) => state.register);
+  const unregister = useControlledFieldStore((state) => state.unregister);
   useEffect(() => {
-    register(field);
-    return () => unregister(field);
+    register(context.formId, field);
+    return () => unregister(context.formId, field);
   }, [context.formId, field, register, unregister]);
 
-  const setControlledFieldValue = useValueStore((state) => state.setValue);
+  const setControlledFieldValue = useControlledFieldStore(
+    (state) => state.setValue
+  );
   const setValue = useCallback(
-    (value: unknown) => setControlledFieldValue(field, value),
-    [field, setControlledFieldValue]
+    (value: unknown) => setControlledFieldValue(context.formId, field, value),
+    [context.formId, field, setControlledFieldValue]
   );
 
   const value = useControlledFieldValue(context, field);
@@ -68,11 +74,17 @@ export const useControllableValue = (
 };
 
 export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const useValueStore = controlledFieldStore(formId);
-  return useValueStore((state) => state.setValue);
+  const setValue = useControlledFieldStore((state) => state.setValue);
+  return useCallback(
+    (field: string, value: unknown) => setValue(formId, field, value),
+    [formId, setValue]
+  );
 };
 
 export const useAwaitValue = (formId: InternalFormId) => {
-  const useValueStore = controlledFieldStore(formId);
-  return useValueStore((state) => state.awaitValueUpdate);
+  const awaitValue = useControlledFieldStore((state) => state.awaitValueUpdate);
+  return useCallback(
+    (field: string) => awaitValue(formId, field),
+    [awaitValue, formId]
+  );
 };

package/src/internal/state/createFormStore.ts

@@ -1,9 +1,15 @@
+import { WritableDraft } from "immer/dist/internal";
 import invariant from "tiny-invariant";
-import create from "zustand";
+import create, { GetState } from "zustand";
 import { immer } from "zustand/middleware/immer";
-import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
-import { controlledFieldStore } from "./controlledFieldStore";
-import { storeFamily } from "./storeFamily";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+  Validator,
+} from "../../validation/types";
+import { useControlledFieldStore } from "./controlledFieldStore";
+import { InternalFormId } from "./types";
 
 export type SyncedFormProps = {
   formId?: string;
@@ -14,6 +20,13 @@ export type SyncedFormProps = {
   validator: Validator<unknown>;
 };
 
+export type FormStoreState = {
+  forms: { [formId: InternalFormId]: FormState };
+  form: (formId: InternalFormId) => FormState;
+  registerForm: (formId: InternalFormId) => void;
+  cleanupForm: (formId: InternalFormId) => void;
+};
+
 export type FormState = {
   isHydrated: boolean;
   isSubmitting: boolean;
@@ -35,118 +48,189 @@ export type FormState = {
   setHydrated: () => void;
   setFormElement: (formElement: HTMLFormElement | null) => void;
   validateField: (fieldName: string) => Promise<string | null>;
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   resetFormElement: () => void;
+  submit: () => void;
 };
 
-export const formStore = storeFamily((formId) =>
-  create<FormState>()(
-    immer((set, get, api) => ({
-      isHydrated: false,
-      isSubmitting: false,
-      hasBeenSubmitted: false,
-      touchedFields: {},
-      fieldErrors: {},
-      formElement: null,
-
-      isValid: () => Object.keys(get().fieldErrors).length === 0,
-      startSubmit: () =>
-        set((state) => {
-          state.isSubmitting = true;
-          state.hasBeenSubmitted = true;
-        }),
-      endSubmit: () =>
-        set((state) => {
-          state.isSubmitting = false;
-        }),
-      setTouched: (fieldName, touched) =>
-        set((state) => {
-          state.touchedFields[fieldName] = touched;
-        }),
-      setFieldError: (fieldName: string, error: string) =>
-        set((state) => {
-          state.fieldErrors[fieldName] = error;
-        }),
-      setFieldErrors: (errors: FieldErrors) =>
-        set((state) => {
-          state.fieldErrors = errors;
-        }),
-      clearFieldError: (fieldName: string) =>
-        set((state) => {
-          delete state.fieldErrors[fieldName];
-        }),
-
-      reset: () =>
-        set((state) => {
-          state.fieldErrors = {};
-          state.touchedFields = {};
-          state.hasBeenSubmitted = false;
-        }),
-      syncFormProps: (props: SyncedFormProps) =>
-        set((state) => {
-          state.formProps = props;
-        }),
-      setHydrated: () =>
-        set((state) => {
-          state.isHydrated = true;
-        }),
-      setFormElement: (formElement: HTMLFormElement | null) => {
-        // This gets called frequently, so we want to avoid calling set() every time
-        // Or else we wind up with an infinite loop
-        if (get().formElement === formElement) return;
-        set((state) => {
-          // weird type issue here
-          // seems to be because formElement is a writable draft
-          state.formElement = formElement as any;
-        });
-      },
-      validateField: async (field: string) => {
-        const formElement = get().formElement;
-        invariant(
-          formElement,
-          "Cannot find reference to form. This is probably a bug in remix-validated-form."
-        );
-
-        const validator = get().formProps?.validator;
-        invariant(
-          validator,
-          "Cannot validator. This is probably a bug in remix-validated-form."
-        );
-
-        await controlledFieldStore(formId).getState().awaitValueUpdate?.(field);
-
-        const { error } = await validator.validateField(
-          new FormData(formElement),
-          field
-        );
-
-        if (error) {
-          get().setFieldError(field, error);
-          return error;
-        } else {
-          get().clearFieldError(field);
-          return null;
-        }
-      },
-
-      validate: async () => {
-        const formElement = get().formElement;
-        invariant(
-          formElement,
-          "Cannot find reference to form. This is probably a bug in remix-validated-form."
-        );
-
-        const validator = get().formProps?.validator;
-        invariant(
-          validator,
-          "Cannot validator. This is probably a bug in remix-validated-form."
-        );
-
-        const { error } = await validator.validate(new FormData(formElement));
-        if (error) get().setFieldErrors(error.fieldErrors);
-      },
-
-      resetFormElement: () => get().formElement?.reset(),
-    }))
-  )
+const noOp = () => {};
+const defaultFormState: FormState = {
+  isHydrated: false,
+  isSubmitting: false,
+  hasBeenSubmitted: false,
+  touchedFields: {},
+  fieldErrors: {},
+  formElement: null,
+  isValid: () => true,
+  startSubmit: noOp,
+  endSubmit: noOp,
+  setTouched: noOp,
+  setFieldError: noOp,
+  setFieldErrors: noOp,
+  clearFieldError: noOp,
+
+  reset: () => noOp,
+  syncFormProps: noOp,
+  setHydrated: noOp,
+  setFormElement: noOp,
+  validateField: async () => null,
+
+  validate: async () => {
+    throw new Error("Validate called before form was initialized.");
+  },
+
+  submit: async () => {
+    throw new Error("Submit called before form was initialized.");
+  },
+
+  resetFormElement: noOp,
+};
+
+const createFormState = (
+  formId: InternalFormId,
+  set: (setter: (draft: WritableDraft<FormState>) => void) => void,
+  get: GetState<FormState>
+): FormState => ({
+  // It's not "hydrated" until the form props are synced
+  isHydrated: false,
+  isSubmitting: false,
+  hasBeenSubmitted: false,
+  touchedFields: {},
+  fieldErrors: {},
+  formElement: null,
+
+  isValid: () => Object.keys(get().fieldErrors).length === 0,
+  startSubmit: () =>
+    set((state) => {
+      state.isSubmitting = true;
+      state.hasBeenSubmitted = true;
+    }),
+  endSubmit: () =>
+    set((state) => {
+      state.isSubmitting = false;
+    }),
+  setTouched: (fieldName, touched) =>
+    set((state) => {
+      state.touchedFields[fieldName] = touched;
+    }),
+  setFieldError: (fieldName: string, error: string) =>
+    set((state) => {
+      state.fieldErrors[fieldName] = error;
+    }),
+  setFieldErrors: (errors: FieldErrors) =>
+    set((state) => {
+      state.fieldErrors = errors;
+    }),
+  clearFieldError: (fieldName: string) =>
+    set((state) => {
+      delete state.fieldErrors[fieldName];
+    }),
+
+  reset: () =>
+    set((state) => {
+      state.fieldErrors = {};
+      state.touchedFields = {};
+      state.hasBeenSubmitted = false;
+    }),
+  syncFormProps: (props: SyncedFormProps) =>
+    set((state) => {
+      state.formProps = props;
+      state.isHydrated = true;
+    }),
+  setHydrated: () =>
+    set((state) => {
+      state.isHydrated = true;
+    }),
+  setFormElement: (formElement: HTMLFormElement | null) => {
+    // This gets called frequently, so we want to avoid calling set() every time
+    // Or else we wind up with an infinite loop
+    if (get().formElement === formElement) return;
+    set((state) => {
+      // weird type issue here
+      // seems to be because formElement is a writable draft
+      state.formElement = formElement as any;
+    });
+  },
+  validateField: async (field: string) => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    const validator = get().formProps?.validator;
+    invariant(
+      validator,
+      "Cannot validator. This is probably a bug in remix-validated-form."
+    );
+
+    await useControlledFieldStore.getState().awaitValueUpdate?.(formId, field);
+
+    const { error } = await validator.validateField(
+      new FormData(formElement),
+      field
+    );
+
+    if (error) {
+      get().setFieldError(field, error);
+      return error;
+    } else {
+      get().clearFieldError(field);
+      return null;
+    }
+  },
+
+  validate: async () => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    const validator = get().formProps?.validator;
+    invariant(
+      validator,
+      "Cannot validator. This is probably a bug in remix-validated-form."
+    );
+
+    const result = await validator.validate(new FormData(formElement));
+    if (result.error) get().setFieldErrors(result.error.fieldErrors);
+    return result;
+  },
+
+  submit: () => {
+    const formElement = get().formElement;
+    invariant(
+      formElement,
+      "Cannot find reference to form. This is probably a bug in remix-validated-form."
+    );
+
+    formElement.submit();
+  },
+
+  resetFormElement: () => get().formElement?.reset(),
+});
+
+export const useRootFormStore = create<FormStoreState>()(
+  immer((set, get) => ({
+    forms: {},
+    form: (formId) => {
+      return get().forms[formId] ?? defaultFormState;
+    },
+    cleanupForm: (formId: InternalFormId) => {
+      set((state) => {
+        delete state.forms[formId];
+      });
+    },
+    registerForm: (formId: InternalFormId) => {
+      if (get().forms[formId]) return;
+      set((state) => {
+        state.forms[formId] = createFormState(
+          formId,
+          (setter) => set((state) => setter(state.forms[formId])),
+          () => get().forms[formId]
+        ) as WritableDraft<FormState>;
+      });
+    },
+  }))
 );

package/src/internal/state/storeHooks.ts

@@ -1,22 +1,9 @@
-import {
-  ControlledFieldState,
-  controlledFieldStore,
-} from "./controlledFieldStore";
-import { FormState, formStore } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
+import { FormState, useRootFormStore } from "./createFormStore";
+import { InternalFormId } from "./types";
 
 export const useFormStore = <T>(
   formId: InternalFormId,
   selector: (state: FormState) => T
 ) => {
-  const useStore = formStore(formId);
-  return useStore(selector);
-};
-
-export const useControlledFieldStore = <T>(
-  formId: InternalFormId,
-  selector: (state: ControlledFieldState) => T
-) => {
-  const useStore = controlledFieldStore(formId);
-  return useStore(selector);
+  return useRootFormStore((state) => selector(state.form(formId)));
 };

package/src/internal/state/types.ts

@@ -0,0 +1 @@
+export type InternalFormId = string | symbol;

package/src/unreleased/formStateHooks.ts

@@ -18,8 +18,13 @@ import {
   useSyncedDefaultValues,
   useFormActionProp,
   useFormSubactionProp,
+  useSubmitForm,
 } from "../internal/hooks";
-import { FieldErrors, TouchedFields } from "../validation/types";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+} from "../validation/types";
 
 export type FormState = {
   fieldErrors: FieldErrors;
@@ -95,7 +100,7 @@ export type FormHelpers = {
   /**
    * Validate the whole form and populate any errors.
    */
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   /**
    * Clears all errors on the form.
    */
@@ -107,6 +112,12 @@ export type FormHelpers = {
    * or clicking a button element with `type="reset"`.
    */
   reset: () => void;
+  /**
+   * Submits the form, running all validations first.
+   *
+   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+   */
+  submit: () => void;
 };
 
 /**
@@ -122,6 +133,7 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
   const clearError = useClearError(formContext);
   const setFieldErrors = useSetFieldErrors(formContext.formId);
   const reset = useResetFormElement(formContext.formId);
+  const submit = useSubmitForm(formContext.formId);
   return useMemo(
     () => ({
       setTouched,
@@ -130,7 +142,16 @@ export const useFormHelpers = (formId?: string): FormHelpers => {
       validate,
       clearAllErrors: () => setFieldErrors({}),
       reset,
+      submit,
     }),
-    [clearError, reset, setFieldErrors, setTouched, validate, validateField]
+    [
+      clearError,
+      reset,
+      setFieldErrors,
+      setTouched,
+      submit,
+      validate,
+      validateField,
+    ]
   );
 };

package/src/userFacingFormContext.ts

@@ -1,10 +1,14 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   useInternalFormContext,
   useRegisterReceiveFocus,
 } from "./internal/hooks";
 import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
-import { FieldErrors, TouchedFields } from "./validation/types";
+import {
+  FieldErrors,
+  TouchedFields,
+  ValidationResult,
+} from "./validation/types";
 
 export type FormContextValue = {
   /**
@@ -61,7 +65,7 @@ export type FormContextValue = {
   /**
    * Validate the whole form and populate any errors.
    */
-  validate: () => Promise<void>;
+  validate: () => Promise<ValidationResult<unknown>>;
   /**
    * Clears all errors on the form.
    */
@@ -73,6 +77,12 @@ export type FormContextValue = {
    * or clicking a button element with `type="reset"`.
    */
   reset: () => void;
+  /**
+   * Submits the form, running all validations first.
+   *
+   * _Note_: This is equivalent to clicking a button element with `type="submit"` or calling formElement.submit().
+   */
+  submit: () => void;
 };
 
 /**
@@ -89,6 +99,7 @@ export const useFormContext = (formId?: string): FormContextValue => {
     clearAllErrors,
     validate,
     reset,
+    submit,
   } = useFormHelpers(formId);
 
   const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
@@ -102,14 +113,28 @@ export const useFormContext = (formId?: string): FormContextValue => {
     [internalClearError]
   );
 
-  return {
-    ...state,
-    setFieldTouched: setTouched,
-    validateField,
-    clearError,
-    registerReceiveFocus,
-    clearAllErrors,
-    validate,
-    reset,
-  };
+  return useMemo(
+    () => ({
+      ...state,
+      setFieldTouched: setTouched,
+      validateField,
+      clearError,
+      registerReceiveFocus,
+      clearAllErrors,
+      validate,
+      reset,
+      submit,
+    }),
+    [
+      clearAllErrors,
+      clearError,
+      registerReceiveFocus,
+      reset,
+      setTouched,
+      state,
+      submit,
+      validate,
+      validateField,
+    ]
+  );
 };

package/dist/types/internal/state/cleanup.d.ts

@@ -1,2 +0,0 @@
-import { InternalFormId } from "./storeFamily";
-export declare const cleanupFormState: (formId: InternalFormId) => void;

package/dist/types/internal/state/storeFamily.d.ts

@@ -1,9 +0,0 @@
-/**
- * This is basically what `atomFamily` from jotai does,
- * but it doesn't make sense to include the entire jotai library just for that api.
- */
-export declare type InternalFormId = string | symbol;
-export declare const storeFamily: <T>(create: (formId: InternalFormId) => T) => {
-    (formId: InternalFormId): T;
-    remove(formId: InternalFormId): void;
-};

package/src/internal/state/cleanup.ts

@@ -1,8 +0,0 @@
-import { controlledFieldStore } from "./controlledFieldStore";
-import { formStore } from "./createFormStore";
-import { InternalFormId } from "./storeFamily";
-
-export const cleanupFormState = (formId: InternalFormId) => {
-  formStore.remove(formId);
-  controlledFieldStore.remove(formId);
-};

package/src/internal/state/storeFamily.ts

@@ -1,24 +0,0 @@
-/**
- * This is basically what `atomFamily` from jotai does,
- * but it doesn't make sense to include the entire jotai library just for that api.
- */
-
-export type InternalFormId = string | symbol;
-
-export const storeFamily = <T>(create: (formId: InternalFormId) => T) => {
-  const stores: Map<InternalFormId, T> = new Map();
-
-  const family = (formId: InternalFormId) => {
-    if (stores.has(formId)) return stores.get(formId)!;
-
-    const store = create(formId);
-    stores.set(formId, store);
-    return store;
-  };
-
-  family.remove = (formId: InternalFormId) => {
-    stores.delete(formId);
-  };
-
-  return family;
-};