remix-validated-form 4.3.1-beta.0 → 4.4.2

package/src/internal/hooks.ts

@@ -1,6 +1,4 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { Atom, useAtom, WritableAtom } from "jotai";
-import { useAtomValue, useUpdateAtom } from "jotai/utils";
 import lodashGet from "lodash/get";
 import { useCallback, useContext } from "react";
 import invariant from "tiny-invariant";
@@ -8,25 +6,8 @@ import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
 import { Hydratable, hydratable } from "./hydratable";
-import {
-  ATOM_SCOPE,
-  fieldErrorAtom,
-  fieldTouchedAtom,
-  formPropsAtom,
-  isHydratedAtom,
-  setFieldErrorAtom,
-  setTouchedAtom,
-} from "./state";
-
-export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
-  useUpdateAtom(atom, ATOM_SCOPE);
-
-export const useFormAtom = <Value, Update, Result extends void | Promise<void>>(
-  anAtom: WritableAtom<Value, Update, Result>
-) => useAtom(anAtom, ATOM_SCOPE);
-
-export const useFormAtomValue = <Value>(anAtom: Atom<Value>) =>
-  useAtomValue(anAtom, ATOM_SCOPE);
+import { InternalFormId } from "./state/storeFamily";
+import { useFormStore } from "./state/storeHooks";
 
 export const useInternalFormContext = (
   formId?: string | symbol,
@@ -72,7 +53,7 @@ export const useFieldErrorsForForm = (
   context: InternalFormContextValue
 ): Hydratable<FieldErrors | undefined> => {
   const response = useErrorResponseForForm(context);
-  const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+  const hydrated = useFormStore(context.formId, (state) => state.isHydrated);
   return hydratable.from(response?.fieldErrors, hydrated);
 };
 
@@ -97,7 +78,7 @@ export const useDefaultValuesForForm = (
   context: InternalFormContextValue
 ): Hydratable<{ [fieldName: string]: any }> => {
   const { formId, defaultValuesProp } = context;
-  const hydrated = useFormAtomValue(isHydratedAtom(formId));
+  const hydrated = useFormStore(formId, (state) => state.isHydrated);
   const errorResponse = useErrorResponseForForm(context);
   const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
 
@@ -133,20 +114,31 @@ export const useHasActiveFormSubmit = ({
 export const useFieldTouched = (
   field: string,
   { formId }: InternalFormContextValue
-) => useFormAtom(fieldTouchedAtom({ formId, field }));
+) => {
+  const touched = useFormStore(formId, (state) => state.touchedFields[field]);
+  const setFieldTouched = useFormStore(formId, (state) => state.setTouched);
+  const setTouched = useCallback(
+    (touched: boolean) => setFieldTouched(field, touched),
+    [field, setFieldTouched]
+  );
+  return [touched, setTouched] as const;
+};
 
 export const useFieldError = (
   name: string,
   context: InternalFormContextValue
 ) => {
   const fieldErrors = useFieldErrorsForForm(context);
-  const [state, set] = useFormAtom(
-    fieldErrorAtom({ formId: context.formId, field: name })
+  const state = useFormStore(
+    context.formId,
+    (state) => state.fieldErrors[name]
   );
-  return [
-    fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state),
-    set,
-  ] as const;
+  return fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state);
+};
+
+export const useClearError = (context: InternalFormContextValue) => {
+  const { formId } = context;
+  return useFormStore(formId, (state) => state.clearFieldError);
 };
 
 export const useFieldDefaultValue = (
@@ -154,26 +146,58 @@ export const useFieldDefaultValue = (
   context: InternalFormContextValue
 ) => {
   const defaultValues = useDefaultValuesForForm(context);
-  const { defaultValues: state } = useFormAtomValue(
-    formPropsAtom(context.formId)
-  );
+  const state = useSyncedDefaultValues(context.formId);
   return defaultValues
     .map((val) => lodashGet(val, name))
     .hydrateTo(lodashGet(state, name));
 };
 
-export const useClearError = ({ formId }: InternalFormContextValue) => {
-  const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
-  return useCallback(
-    (name: string) => updateError({ field: name, error: undefined }),
-    [updateError]
+export const useInternalIsSubmitting = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isSubmitting);
+
+export const useInternalIsValid = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.isValid());
+
+export const useInternalHasBeenSubmitted = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.hasBeenSubmitted);
+
+export const useValidateField = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validateField);
+
+export const useValidate = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.validate);
+
+const noOpReceiver = () => () => {};
+export const useRegisterReceiveFocus = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.registerReceiveFocus ?? noOpReceiver
   );
-};
 
-export const useSetTouched = ({ formId }: InternalFormContextValue) => {
-  const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
-  return useCallback(
-    (name: string, touched: boolean) => setTouched({ field: name, touched }),
-    [setTouched]
+const defaultDefaultValues = {};
+export const useSyncedDefaultValues = (formId: InternalFormId) =>
+  useFormStore(
+    formId,
+    (state) => state.formProps?.defaultValues ?? defaultDefaultValues
   );
-};
+
+export const useSetTouched = ({ formId }: InternalFormContextValue) =>
+  useFormStore(formId, (state) => state.setTouched);
+
+export const useTouchedFields = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.touchedFields);
+
+export const useFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.fieldErrors);
+
+export const useSetFieldErrors = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.setFieldErrors);
+
+export const useResetFormElement = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.resetFormElement);
+
+export const useFormActionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.action);
+
+export const useFormSubactionProp = (formId: InternalFormId) =>
+  useFormStore(formId, (state) => state.formProps?.subaction);

package/src/internal/logic/getRadioChecked.ts

@@ -8,7 +8,7 @@ export const getRadioChecked = (
 
 if (import.meta.vitest) {
   const { it, expect } = import.meta.vitest;
-  it("add", () => {
+  it("getRadioChecked", () => {
     expect(getRadioChecked("on", "on")).toBe(true);
     expect(getRadioChecked("on", undefined)).toBe(undefined);
     expect(getRadioChecked("trueValue", undefined)).toBe(undefined);

package/src/internal/state/cleanup.ts

@@ -0,0 +1,8 @@
+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/controlledFieldStore.ts

@@ -0,0 +1,91 @@
+import invariant from "tiny-invariant";
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { storeFamily } from "./storeFamily";
+
+export type ControlledFieldState = {
+  fields: {
+    [fieldName: string]:
+      | {
+          refCount: number;
+          value: unknown;
+          defaultValue?: unknown;
+          hydrated: boolean;
+          valueUpdatePromise: Promise<void> | undefined;
+          resolveValueUpdate: (() => void) | undefined;
+        }
+      | undefined;
+  };
+  register: (fieldName: string) => void;
+  unregister: (fieldName: string) => void;
+  setValue: (fieldName: string, value: unknown) => void;
+  hydrateWithDefault: (fieldName: string, defaultValue: unknown) => void;
+  awaitValueUpdate: (fieldName: string) => Promise<void>;
+  reset: () => void;
+};
+
+export const controlledFieldStore = storeFamily(() =>
+  create<ControlledFieldState>()(
+    immer((set, get, api) => ({
+      fields: {},
+
+      register: (field) =>
+        set((state) => {
+          if (state.fields[field]) {
+            state.fields[field]!.refCount++;
+          } else {
+            state.fields[field] = {
+              refCount: 1,
+              value: undefined,
+              hydrated: false,
+              valueUpdatePromise: undefined,
+              resolveValueUpdate: undefined,
+            };
+          }
+        }),
+
+      unregister: (field) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.refCount--;
+          if (fieldState.refCount === 0) delete state.fields[field];
+        }),
+
+      setValue: (field, value) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.value = value;
+          const promise = new Promise<void>((resolve) => {
+            fieldState.resolveValueUpdate = resolve;
+          });
+          fieldState.valueUpdatePromise = promise;
+        }),
+
+      hydrateWithDefault: (field, defaultValue) =>
+        set((state) => {
+          const fieldState = state.fields[field];
+          if (!fieldState) return;
+
+          fieldState.value = defaultValue;
+          fieldState.defaultValue = defaultValue;
+          fieldState.hydrated = true;
+        }),
+
+      awaitValueUpdate: async (field) => {
+        await get().fields[field]?.valueUpdatePromise;
+      },
+
+      reset: () =>
+        set((state) => {
+          Object.values(state.fields).forEach((field) => {
+            if (!field) return;
+            field.value = field.defaultValue;
+          });
+        }),
+    }))
+  )
+);

package/src/internal/state/controlledFields.ts

@@ -1,115 +1,36 @@
-import { atom, PrimitiveAtom } from "jotai";
-import { useAtomCallback } from "jotai/utils";
-import omit from "lodash/omit";
 import { useCallback, useEffect } from "react";
 import { InternalFormContextValue } from "../formContext";
-import {
-  useFieldDefaultValue,
-  useFormAtomValue,
-  useFormAtom,
-  useFormUpdateAtom,
-} from "../hooks";
-import { isHydratedAtom } from "../state";
-import {
-  fieldAtomFamily,
-  FieldAtomKey,
-  formAtomFamily,
-  InternalFormId,
-} from "./atomUtils";
-
-export const controlledFieldsAtom = formAtomFamily<
-  Record<string, PrimitiveAtom<unknown>>
->({});
-const refCountAtom = fieldAtomFamily(() => atom(0));
-const fieldValueAtom = fieldAtomFamily(() => atom<unknown>(undefined));
-const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
-
-export const valueUpdatePromiseAtom = fieldAtomFamily(() =>
-  atom<Promise<void> | undefined>(undefined)
-);
-export const resolveValueUpdateAtom = fieldAtomFamily(() =>
-  atom<(() => void) | undefined>(undefined)
-);
-
-const registerAtom = atom(null, (get, set, { formId, field }: FieldAtomKey) => {
-  set(refCountAtom({ formId, field }), (prev) => prev + 1);
-  const newRefCount = get(refCountAtom({ formId, field }));
-  // We don't set hydrated here because it gets set when we know
-  // we have the right default values
-  if (newRefCount === 1) {
-    set(controlledFieldsAtom(formId), (prev) => ({
-      ...prev,
-      [field]: fieldValueAtom({ formId, field }),
-    }));
-  }
-});
-
-const unregisterAtom = atom(
-  null,
-  (get, set, { formId, field }: FieldAtomKey) => {
-    set(refCountAtom({ formId, field }), (prev) => prev - 1);
-    const newRefCount = get(refCountAtom({ formId, field }));
-    if (newRefCount === 0) {
-      set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
-      fieldValueAtom.remove({ formId, field });
-      resolveValueUpdateAtom.remove({ formId, field });
-      fieldValueHydratedAtom.remove({ formId, field });
-    }
-  }
-);
-
-export const setControlledFieldValueAtom = atom(
-  null,
-  (
-    _get,
-    set,
-    {
-      formId,
-      field,
-      value,
-    }: { formId: InternalFormId; field: string; value: unknown }
-  ) => {
-    set(fieldValueAtom({ formId, field }), value);
-    const resolveAtom = resolveValueUpdateAtom({ formId, field });
-    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
-
-    const promise = new Promise<void>((resolve) =>
-      set(resolveAtom, () => {
-        resolve();
-        set(resolveAtom, undefined);
-        set(promiseAtom, undefined);
-      })
-    );
-    set(promiseAtom, promise);
-  }
-);
+import { useFieldDefaultValue } from "../hooks";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
 
 export const useControlledFieldValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const fieldAtom = fieldValueAtom({ formId: context.formId, field });
-  const [value, setValue] = useFormAtom(fieldAtom);
+  const useValueStore = controlledFieldStore(context.formId);
+  const value = useValueStore((state) => state.fields[field]?.value);
 
+  const useFormStore = formStore(context.formId);
+  const isFormHydrated = useFormStore((state) => state.isHydrated);
   const defaultValue = useFieldDefaultValue(field, context);
-  const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
-  const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(
-    fieldValueHydratedAtom({ formId: context.formId, field })
+
+  const isFieldHydrated = useValueStore(
+    (state) => state.fields[field]?.hydrated ?? false
   );
+  const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
 
   useEffect(() => {
-    if (isHydrated && !isFieldHydrated) {
-      setValue(defaultValue);
-      setIsFieldHydrated(true);
+    if (isFormHydrated && !isFieldHydrated) {
+      hydrateWithDefault(field, defaultValue);
     }
   }, [
     defaultValue,
     field,
-    context.formId,
+    hydrateWithDefault,
     isFieldHydrated,
-    isHydrated,
-    setIsFieldHydrated,
-    setValue,
+    isFormHydrated,
   ]);
 
   return isFieldHydrated ? value : defaultValue;
@@ -119,27 +40,26 @@ export const useControllableValue = (
   context: InternalFormContextValue,
   field: string
 ) => {
-  const resolveUpdate = useFormAtomValue(
-    resolveValueUpdateAtom({ formId: context.formId, field })
+  const useValueStore = controlledFieldStore(context.formId);
+
+  const resolveUpdate = useValueStore(
+    (state) => state.fields[field]?.resolveValueUpdate
   );
   useEffect(() => {
     resolveUpdate?.();
   }, [resolveUpdate]);
 
-  const register = useFormUpdateAtom(registerAtom);
-  const unregister = useFormUpdateAtom(unregisterAtom);
+  const register = useValueStore((state) => state.register);
+  const unregister = useValueStore((state) => state.unregister);
   useEffect(() => {
-    register({ formId: context.formId, field });
-    return () => unregister({ formId: context.formId, field });
+    register(field);
+    return () => unregister(field);
   }, [context.formId, field, register, unregister]);
 
-  const setControlledFieldValue = useFormUpdateAtom(
-    setControlledFieldValueAtom
-  );
+  const setControlledFieldValue = useValueStore((state) => state.setValue);
   const setValue = useCallback(
-    (value: unknown) =>
-      setControlledFieldValue({ formId: context.formId, field, value }),
-    [field, context.formId, setControlledFieldValue]
+    (value: unknown) => setControlledFieldValue(field, value),
+    [field, setControlledFieldValue]
   );
 
   const value = useControlledFieldValue(context, field);
@@ -148,23 +68,11 @@ export const useControllableValue = (
 };
 
 export const useUpdateControllableValue = (formId: InternalFormId) => {
-  const setControlledFieldValue = useFormUpdateAtom(
-    setControlledFieldValueAtom
-  );
-  return useCallback(
-    (field: string, value: unknown) =>
-      setControlledFieldValue({ formId, field, value }),
-    [formId, setControlledFieldValue]
-  );
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.setValue);
 };
 
 export const useAwaitValue = (formId: InternalFormId) => {
-  return useAtomCallback(
-    useCallback(
-      async (get, _set, field: string) => {
-        await get(valueUpdatePromiseAtom({ formId, field }));
-      },
-      [formId]
-    )
-  );
+  const useValueStore = controlledFieldStore(formId);
+  return useValueStore((state) => state.awaitValueUpdate);
 };

package/src/internal/state/createFormStore.ts

@@ -0,0 +1,152 @@
+import invariant from "tiny-invariant";
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { storeFamily } from "./storeFamily";
+
+export type SyncedFormProps = {
+  formId?: string;
+  action?: string;
+  subaction?: string;
+  defaultValues: { [fieldName: string]: any };
+  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+  validator: Validator<unknown>;
+};
+
+export type FormState = {
+  isHydrated: boolean;
+  isSubmitting: boolean;
+  hasBeenSubmitted: boolean;
+  fieldErrors: FieldErrors;
+  touchedFields: TouchedFields;
+  formProps?: SyncedFormProps;
+  formElement: HTMLFormElement | null;
+
+  isValid: () => boolean;
+  startSubmit: () => void;
+  endSubmit: () => void;
+  setTouched: (field: string, touched: boolean) => void;
+  setFieldError: (field: string, error: string) => void;
+  setFieldErrors: (errors: FieldErrors) => void;
+  clearFieldError: (field: string) => void;
+  reset: () => void;
+  syncFormProps: (props: SyncedFormProps) => void;
+  setHydrated: () => void;
+  setFormElement: (formElement: HTMLFormElement | null) => void;
+  validateField: (fieldName: string) => Promise<string | null>;
+  validate: () => Promise<void>;
+  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(),
+    }))
+  )
+);

package/src/internal/state/storeFamily.ts

@@ -0,0 +1,24 @@
+/**
+ * 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;
+};

package/src/internal/state/storeHooks.ts

@@ -0,0 +1,22 @@
+import {
+  ControlledFieldState,
+  controlledFieldStore,
+} from "./controlledFieldStore";
+import { FormState, formStore } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
+
+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);
+};