remix-validated-form 4.4.1 → 4.5.0-beta.0

package/src/internal/state/createFormStore.ts

@@ -1,9 +1,10 @@
+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 { useControlledFieldStore } from "./controlledFieldStore";
+import { InternalFormId } from "./types";
 
 export type SyncedFormProps = {
   formId?: string;
@@ -14,6 +15,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;
@@ -39,114 +47,167 @@ export type FormState = {
   resetFormElement: () => 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 () => {},
+
+  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 { error } = await validator.validate(new FormData(formElement));
+    if (error) get().setFieldErrors(error.fieldErrors);
+  },
+
+  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/userFacingFormContext.ts

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import {
   useInternalFormContext,
   useRegisterReceiveFocus,
@@ -102,14 +102,26 @@ 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,
+    }),
+    [
+      clearAllErrors,
+      clearError,
+      registerReceiveFocus,
+      reset,
+      setTouched,
+      state,
+      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;
-};