remix-validated-form 4.1.4-beta.0 → 4.1.6

package/src/internal/state.ts

@@ -1,210 +1,132 @@
 import { atom } from "jotai";
-import { atomWithImmer } from "jotai/immer";
 import { atomFamily, selectAtom } from "jotai/utils";
-import lodashGet from "lodash/get";
+import omit from "lodash/omit";
 import { FieldErrors, TouchedFields } from "../validation/types";
+import {
+  fieldAtomFamily,
+  formAtomFamily,
+  InternalFormId,
+} from "./state/atomUtils";
 
 export const ATOM_SCOPE = Symbol("remix-validated-form-scope");
 
-export type FormState = {
-  // Actual state
-  hydrated: boolean;
-  fieldErrors?: FieldErrors;
-  isSubmitting: boolean;
-  hasBeenSubmitted: boolean;
-  touchedFields: TouchedFields;
-
-  // Populated by the form component
+export type SyncedFormProps = {
   formId?: string;
   action?: string;
   subaction?: string;
-  defaultValues?: { [fieldName: string]: any };
+  defaultValues: { [fieldName: string]: any };
   validateField: (fieldName: string) => Promise<string | null>;
   registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
 };
 
-export type FormAtom = ReturnType<typeof formRegistry>;
-
-export type FieldState = {
-  touched: boolean;
-  defaultValue?: any;
-  error?: string;
+export const isHydratedAtom = formAtomFamily(false);
+export const isSubmittingAtom = formAtomFamily(false);
+export const hasBeenSubmittedAtom = formAtomFamily(false);
+export const fieldErrorsAtom = formAtomFamily<FieldErrors>({});
+export const touchedFieldsAtom = formAtomFamily<TouchedFields>({});
+export const formPropsAtom = formAtomFamily<SyncedFormProps>({
+  validateField: () => Promise.resolve(null),
+  registerReceiveFocus: () => () => {},
+  defaultValues: {},
+});
+export const formElementAtom = formAtomFamily<HTMLFormElement | null>(null);
+
+//// Everything below is derived from the above
+
+export const cleanupFormState = (formId: InternalFormId) => {
+  [
+    isHydratedAtom,
+    isSubmittingAtom,
+    hasBeenSubmittedAtom,
+    fieldErrorsAtom,
+    touchedFieldsAtom,
+    formPropsAtom,
+  ].forEach((formAtom) => formAtom.remove(formId));
 };
 
-export const formRegistry = atomFamily((formId: string | symbol) =>
-  atomWithImmer<FormState>({
-    hydrated: false,
-    isSubmitting: false,
-    hasBeenSubmitted: false,
-    touchedFields: {},
-
-    // The symbol version is just to keep things straight with the `atomFamily`
-    formId: typeof formId === "string" ? formId : undefined,
-
-    // Will change upon hydration -- these will never actually be used
-    validateField: () => Promise.resolve(null),
-    registerReceiveFocus: () => () => {},
-  })
+export const isValidAtom = atomFamily((formId: InternalFormId) =>
+  atom((get) => Object.keys(get(fieldErrorsAtom(formId))).length === 0)
 );
 
-export const fieldErrorAtom = (name: string) => (formAtom: FormAtom) =>
-  selectAtom(formAtom, (formState) => formState.fieldErrors?.[name]);
-
-export const fieldTouchedAtom = (name: string) => (formAtom: FormAtom) =>
-  selectAtom(formAtom, (formState) => formState.touchedFields[name]);
-
-export const fieldDefaultValueAtom = (name: string) => (formAtom: FormAtom) =>
-  selectAtom(
-    formAtom,
-    (formState) =>
-      formState.defaultValues && lodashGet(formState.defaultValues, name)
-  );
-
-// Selector atoms
-
-export const formSelectorAtom =
-  <T>(selector: (state: FormState) => T) =>
-  (formAtom: FormAtom) =>
-    selectAtom(formAtom, selector);
-
-export const fieldErrorsAtom = formSelectorAtom((state) => state.fieldErrors);
-export const touchedFieldsAtom = formSelectorAtom(
-  (state) => state.touchedFields
-);
-export const actionAtom = formSelectorAtom((state) => state.action);
-export const hasBeenSubmittedAtom = formSelectorAtom(
-  (state) => state.hasBeenSubmitted
-);
-export const validateFieldAtom = formSelectorAtom(
-  (state) => state.validateField
-);
-export const registerReceiveFocusAtom = formSelectorAtom(
-  (state) => state.registerReceiveFocus
-);
-export const isSubmittingAtom = formSelectorAtom((state) => state.isSubmitting);
-export const defaultValuesAtom = formSelectorAtom(
-  (state) => state.defaultValues
-);
-export const isValidAtom = formSelectorAtom(
-  (state) => Object.keys(state.fieldErrors ?? {}).length === 0
+export const resetAtom = atomFamily((formId: InternalFormId) =>
+  atom(null, (_get, set) => {
+    set(fieldErrorsAtom(formId), {});
+    set(touchedFieldsAtom(formId), {});
+    set(hasBeenSubmittedAtom(formId), false);
+  })
 );
-export const isHydratedAtom = formSelectorAtom((state) => state.hydrated);
-
-// Update atoms
-
-export type FieldAtomArgs = {
-  name: string;
-  formAtom: FormAtom;
-};
 
-export const clearErrorAtom = atom(
-  null,
-  (get, set, { name, formAtom }: FieldAtomArgs) =>
-    set(formAtom, (state) => {
-      delete state.fieldErrors?.[name];
-      return state;
-    })
+export const startSubmitAtom = atomFamily((formId: InternalFormId) =>
+  atom(null, (_get, set) => {
+    set(isSubmittingAtom(formId), true);
+    set(hasBeenSubmittedAtom(formId), true);
+  })
 );
 
-export const addErrorAtom = atom(
-  null,
-  (get, set, { name, formAtom, error }: FieldAtomArgs & { error: string }) =>
-    set(formAtom, (state) => {
-      if (!state.fieldErrors) state.fieldErrors = {};
-      state.fieldErrors[name] = error;
-      return state;
-    })
+export const endSubmitAtom = atomFamily((formId: InternalFormId) =>
+  atom(null, (_get, set) => {
+    set(isSubmittingAtom(formId), false);
+  })
 );
 
-export const setFieldErrorsAtom = atom(
-  null,
-  (
-    get,
-    set,
-    { formAtom, fieldErrors }: { fieldErrors: FieldErrors; formAtom: FormAtom }
-  ) =>
-    set(formAtom, (state) => {
-      state.fieldErrors = fieldErrors;
-      return state;
-    })
+export const setTouchedAtom = atomFamily((formId: InternalFormId) =>
+  atom(
+    null,
+    (get, set, { field, touched }: { field: string; touched: boolean }) => {
+      const prev = get(touchedFieldsAtom(formId));
+      if (prev[field] !== touched) {
+        set(touchedFieldsAtom(formId), {
+          ...prev,
+          [field]: touched,
+        });
+      }
+    }
+  )
 );
 
-export const setTouchedAtom = atom(
-  null,
-  (
-    get,
-    set,
-    { name, formAtom, touched }: FieldAtomArgs & { touched: boolean }
-  ) =>
-    set(formAtom, (state) => {
-      state.touchedFields[name] = touched;
-      return state;
-    })
+export const setFieldErrorAtom = atomFamily((formId: InternalFormId) =>
+  atom(
+    null,
+    (
+      get,
+      set,
+      { field, error }: { field: string; error: string | undefined }
+    ) => {
+      const prev = get(fieldErrorsAtom(formId));
+      if (error === undefined && field in prev) {
+        set(fieldErrorsAtom(formId), omit(prev, field));
+      }
+
+      if (error !== undefined && prev[field] !== error) {
+        set(fieldErrorsAtom(formId), {
+          ...get(fieldErrorsAtom(formId)),
+          [field]: error,
+        });
+      }
+    }
+  )
 );
 
-export const resetAtom = atom(
-  null,
-  (get, set, { formAtom }: { formAtom: FormAtom }) => {
-    set(formAtom, (state) => {
-      state.fieldErrors = {};
-      state.touchedFields = {};
-      state.hasBeenSubmitted = false;
-      return state;
-    });
-  }
-);
+//// Field specific
 
-export const startSubmitAtom = atom(
-  null,
-  (get, set, { formAtom }: { formAtom: FormAtom }) => {
-    set(formAtom, (state) => {
-      state.hasBeenSubmitted = true;
-      state.isSubmitting = true;
-      return state;
-    });
-  }
+export const fieldTouchedAtom = fieldAtomFamily(({ formId, field }) =>
+  atom(
+    (get) => get(touchedFieldsAtom(formId))[field],
+    (_get, set, touched: boolean) => {
+      set(setTouchedAtom(formId), { field, touched });
+    }
+  )
 );
 
-export const endSubmitAtom = atom(
-  null,
-  (get, set, { formAtom }: { formAtom: FormAtom }) => {
-    set(formAtom, (state) => {
-      state.isSubmitting = false;
-      return state;
-    });
-  }
+export const fieldErrorAtom = fieldAtomFamily(({ formId, field }) =>
+  atom(
+    (get) => get(fieldErrorsAtom(formId))[field],
+    (_get, set, error: string | undefined) => {
+      set(setFieldErrorAtom(formId), { field, error });
+    }
+  )
 );
 
-type SyncFormContextArgs = {
-  defaultValues?: { [fieldName: string]: any };
-  action?: string;
-  subaction?: string;
-  validateField: FormState["validateField"];
-  registerReceiveFocus: FormState["registerReceiveFocus"];
-  formAtom: FormAtom;
-};
-export const syncFormContextAtom = atom(
-  null,
-  (
-    get,
-    set,
-    {
-      defaultValues,
-      action,
-      subaction,
-      formAtom,
-      validateField,
-      registerReceiveFocus,
-    }: SyncFormContextArgs
-  ) => {
-    set(formAtom, (state) => {
-      state.defaultValues = defaultValues;
-      state.action = action;
-      state.subaction = subaction;
-      state.registerReceiveFocus = registerReceiveFocus;
-      state.validateField = validateField;
-      state.hydrated = true;
-      return state;
-    });
-  }
+export const fieldDefaultValueAtom = fieldAtomFamily(({ formId, field }) =>
+  selectAtom(formPropsAtom(formId), (state) => state.defaultValues[field])
 );

package/src/unreleased/formStateHooks.ts

@@ -0,0 +1,113 @@
+import { useMemo } from "react";
+import {} from "../internal/getInputProps";
+import {
+  useInternalFormContext,
+  useClearError,
+  useSetTouched,
+  useDefaultValuesForForm,
+  useFieldErrorsForForm,
+  useFormAtomValue,
+} from "../internal/hooks";
+import {
+  fieldErrorsAtom,
+  formPropsAtom,
+  hasBeenSubmittedAtom,
+  isSubmittingAtom,
+  isValidAtom,
+  touchedFieldsAtom,
+} from "../internal/state";
+import { FieldErrors, TouchedFields } from "../validation/types";
+
+export type FormState = {
+  fieldErrors: FieldErrors;
+  isSubmitting: boolean;
+  hasBeenSubmitted: boolean;
+  touchedFields: TouchedFields;
+  defaultValues: { [fieldName: string]: any };
+  action?: string;
+  subaction?: string;
+  isValid: boolean;
+};
+
+/**
+ * Returns information about the form.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export const useFormState = (formId?: string): FormState => {
+  const formContext = useInternalFormContext(formId, "useIsValid");
+  const formProps = useFormAtomValue(formPropsAtom(formContext.formId));
+  const isSubmitting = useFormAtomValue(isSubmittingAtom(formContext.formId));
+  const hasBeenSubmitted = useFormAtomValue(
+    hasBeenSubmittedAtom(formContext.formId)
+  );
+  const touchedFields = useFormAtomValue(touchedFieldsAtom(formContext.formId));
+  const isValid = useFormAtomValue(isValidAtom(formContext.formId));
+
+  const defaultValuesToUse = useDefaultValuesForForm(formContext);
+  const hydratedDefaultValues = defaultValuesToUse.hydrateTo(
+    formProps.defaultValues
+  );
+
+  const fieldErrorsFromState = useFormAtomValue(
+    fieldErrorsAtom(formContext.formId)
+  );
+  const fieldErrorsToUse = useFieldErrorsForForm(formContext);
+  const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
+
+  return useMemo(
+    () => ({
+      ...formProps,
+      defaultValues: hydratedDefaultValues,
+      fieldErrors: hydratedFieldErrors ?? {},
+      hasBeenSubmitted,
+      isSubmitting,
+      touchedFields,
+      isValid,
+    }),
+    [
+      formProps,
+      hasBeenSubmitted,
+      hydratedDefaultValues,
+      hydratedFieldErrors,
+      isSubmitting,
+      isValid,
+      touchedFields,
+    ]
+  );
+};
+
+export type FormHelpers = {
+  /**
+   * Clear the error of the specified field.
+   */
+  clearError: (fieldName: string) => void;
+  /**
+   * Validate the specified field.
+   */
+  validateField: (fieldName: string) => Promise<string | null>;
+  /**
+   * Change the touched state of the specified field.
+   */
+  setTouched: (fieldName: string, touched: boolean) => void;
+};
+
+/**
+ * Returns helpers that can be used to update the form state.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export const useFormHelpers = (formId?: string): FormHelpers => {
+  const formContext = useInternalFormContext(formId, "useFormHelpers");
+  const setTouched = useSetTouched(formContext);
+  const { validateField } = useFormAtomValue(formPropsAtom(formContext.formId));
+  const clearError = useClearError(formContext);
+  return useMemo(
+    () => ({
+      setTouched,
+      validateField,
+      clearError,
+    }),
+    [clearError, setTouched, validateField]
+  );
+};

package/src/userFacingFormContext.ts

@@ -1,23 +1,7 @@
 import { useCallback } from "react";
-import { useIsSubmitting, useIsValid } from "./hooks";
-import {
-  useClearError,
-  useContextSelectAtom,
-  useDefaultValuesForForm,
-  useFieldErrorsForForm,
-  useHydratableSelector,
-  useInternalFormContext,
-  useSetTouched,
-} from "./internal/hooks";
-import {
-  actionAtom,
-  defaultValuesAtom,
-  fieldErrorsAtom,
-  hasBeenSubmittedAtom,
-  registerReceiveFocusAtom,
-  touchedFieldsAtom,
-  validateFieldAtom,
-} from "./internal/state";
+import { useFormAtomValue, useInternalFormContext } from "./internal/hooks";
+import { formPropsAtom } from "./internal/state";
+import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
 import { FieldErrors, TouchedFields } from "./validation/types";
 
 export type FormContextValue = {
@@ -76,34 +60,17 @@ export type FormContextValue = {
 export const useFormContext = (formId?: string): FormContextValue => {
   // Try to access context so we get our error specific to this hook if it's not there
   const context = useInternalFormContext(formId, "useFormContext");
+  const state = useFormState(formId);
+  const {
+    clearError: internalClearError,
+    setTouched,
+    validateField,
+  } = useFormHelpers(formId);
 
-  const action = useContextSelectAtom(context.formId, actionAtom);
-  const isSubmitting = useIsSubmitting(formId);
-  const hasBeenSubmitted = useContextSelectAtom(
-    context.formId,
-    hasBeenSubmittedAtom
-  );
-  const isValid = useIsValid(formId);
-  const defaultValues = useHydratableSelector(
-    context,
-    defaultValuesAtom,
-    useDefaultValuesForForm(context)
-  );
-  const fieldErrors = useHydratableSelector(
-    context,
-    fieldErrorsAtom,
-    useFieldErrorsForForm(context)
-  );
-
-  const setFieldTouched = useSetTouched(context);
-  const touchedFields = useContextSelectAtom(context.formId, touchedFieldsAtom);
-  const validateField = useContextSelectAtom(context.formId, validateFieldAtom);
-  const registerReceiveFocus = useContextSelectAtom(
-    context.formId,
-    registerReceiveFocusAtom
+  const { registerReceiveFocus } = useFormAtomValue(
+    formPropsAtom(context.formId)
   );
 
-  const internalClearError = useClearError(context);
   const clearError = useCallback(
     (...names: string[]) => {
       names.forEach((name) => {
@@ -114,16 +81,10 @@ export const useFormContext = (formId?: string): FormContextValue => {
   );
 
   return {
-    isSubmitting,
-    hasBeenSubmitted,
-    isValid,
-    defaultValues,
-    clearError,
-    fieldErrors: fieldErrors ?? {},
-    action,
-    setFieldTouched,
-    touchedFields,
+    ...state,
+    setFieldTouched: setTouched,
     validateField,
+    clearError,
     registerReceiveFocus,
   };
 };