remix-validated-form 4.1.3 → 4.1.5

package/src/ValidatedForm.tsx

@@ -25,15 +25,16 @@ import {
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
 import {
-  addErrorAtom,
-  clearErrorAtom,
+  cleanupFormState,
   endSubmitAtom,
-  formRegistry,
-  FormState,
+  fieldErrorsAtom,
+  formElementAtom,
+  formPropsAtom,
+  isHydratedAtom,
   resetAtom,
-  setFieldErrorsAtom,
+  setFieldErrorAtom,
   startSubmitAtom,
-  syncFormContextAtom,
+  SyncedFormProps,
 } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
@@ -192,12 +193,6 @@ function formEventProxy<T extends object>(event: T): T {
   }) as T;
 }
 
-const useFormAtom = (formId: string | symbol) => {
-  const formAtom = formRegistry(formId);
-  useEffect(() => () => formRegistry.remove(formId), [formId]);
-  return formAtom;
-};
-
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -219,7 +214,6 @@ export function ValidatedForm<DataType>({
   ...rest
 }: FormProps<DataType>) {
   const formId = useFormId(id);
-  const formAtom = useFormAtom(formId);
   const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
@@ -238,73 +232,75 @@ export function ValidatedForm<DataType>({
   const Form = fetcher?.Form ?? RemixForm;
 
   const submit = useSubmit();
-  const clearError = useFormUpdateAtom(clearErrorAtom);
-  const addError = useFormUpdateAtom(addErrorAtom);
-  const setFieldErrors = useFormUpdateAtom(setFieldErrorsAtom);
-  const reset = useFormUpdateAtom(resetAtom);
-  const startSubmit = useFormUpdateAtom(startSubmitAtom);
-  const endSubmit = useFormUpdateAtom(endSubmitAtom);
-  const syncFormContext = useFormUpdateAtom(syncFormContextAtom);
+  const setFieldErrors = useFormUpdateAtom(fieldErrorsAtom(formId));
+  const setFieldError = useFormUpdateAtom(setFieldErrorAtom(formId));
+  const reset = useFormUpdateAtom(resetAtom(formId));
+  const startSubmit = useFormUpdateAtom(startSubmitAtom(formId));
+  const endSubmit = useFormUpdateAtom(endSubmitAtom(formId));
+  const syncFormProps = useFormUpdateAtom(formPropsAtom(formId));
+  const setHydrated = useFormUpdateAtom(isHydratedAtom(formId));
+  const setFormElementInState = useFormUpdateAtom(formElementAtom(formId));
 
-  const validateField: FormState["validateField"] = useCallback(
-    async (fieldName) => {
+  useEffect(() => {
+    setHydrated(true);
+    return () => cleanupFormState(formId);
+  }, [formId, setHydrated]);
+
+  const validateField: SyncedFormProps["validateField"] = useCallback(
+    async (field) => {
       invariant(formRef.current, "Cannot find reference to form");
       const { error } = await validator.validateField(
         getDataFromForm(formRef.current),
-        fieldName as any
+        field
       );
 
       if (error) {
-        addError({ formAtom, name: fieldName, error });
+        setFieldError({ field, error });
         return error;
       } else {
-        clearError({ name: fieldName, formAtom });
+        setFieldError({ field, error: undefined });
         return null;
       }
     },
-    [addError, clearError, formAtom, validator]
+    [setFieldError, validator]
   );
 
   const customFocusHandlers = useMultiValueMap<string, () => void>();
-  const registerReceiveFocus: FormState["registerReceiveFocus"] = useCallback(
-    (fieldName, handler) => {
-      customFocusHandlers().add(fieldName, handler);
-      return () => {
-        customFocusHandlers().remove(fieldName, handler);
-      };
-    },
-    [customFocusHandlers]
-  );
+  const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
+    useCallback(
+      (fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+          customFocusHandlers().remove(fieldName, handler);
+        };
+      },
+      [customFocusHandlers]
+    );
 
   useLayoutEffect(() => {
-    syncFormContext({
-      formAtom,
+    syncFormProps({
       action,
-      defaultValues: providedDefaultValues ?? backendDefaultValues,
+      defaultValues: providedDefaultValues ?? backendDefaultValues ?? {},
       subaction,
       validateField,
       registerReceiveFocus,
     });
   }, [
     action,
-    formAtom,
     providedDefaultValues,
     registerReceiveFocus,
     subaction,
-    syncFormContext,
+    syncFormProps,
     validateField,
     backendDefaultValues,
   ]);
 
   useEffect(() => {
-    setFieldErrors({
-      fieldErrors: backendError?.fieldErrors ?? {},
-      formAtom,
-    });
-  }, [backendError?.fieldErrors, formAtom, setFieldErrors]);
+    setFieldErrors(backendError?.fieldErrors ?? {});
+  }, [backendError?.fieldErrors, setFieldErrors, setFieldError]);
 
   useSubmitComplete(hasActiveSubmission, () => {
-    endSubmit({ formAtom });
+    endSubmit();
   });
 
   let clickedButtonRef = React.useRef<any>();
@@ -334,11 +330,11 @@ export function ValidatedForm<DataType>({
   }, []);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    startSubmit({ formAtom });
+    startSubmit();
     const result = await validator.validate(getDataFromForm(e.currentTarget));
     if (result.error) {
-      endSubmit({ formAtom });
-      setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+      endSubmit();
+      setFieldErrors(result.error.fieldErrors);
       if (!disableFocusOnError) {
         focusFirstInvalidInput(
           result.error.fieldErrors,
@@ -350,7 +346,7 @@ export function ValidatedForm<DataType>({
       const eventProxy = formEventProxy(e);
       await onSubmit?.(result.data, eventProxy);
       if (eventProxy.defaultPrevented) {
-        endSubmit({ formAtom });
+        endSubmit();
         return;
       }
 
@@ -372,7 +368,7 @@ export function ValidatedForm<DataType>({
 
   return (
     <Form
-      ref={mergeRefs([formRef, formRefProp])}
+      ref={mergeRefs([formRef, formRefProp, setFormElementInState])}
       {...rest}
       id={id}
       action={action}
@@ -385,7 +381,7 @@ export function ValidatedForm<DataType>({
       onReset={(event) => {
         onReset?.(event);
         if (event.defaultPrevented) return;
-        reset({ formAtom });
+        reset();
       }}
     >
       <InternalFormContext.Provider value={contextValue}>

package/src/hooks.ts

@@ -8,17 +8,14 @@ import {
   useInternalFormContext,
   useFieldTouched,
   useFieldError,
+  useFormAtomValue,
   useFieldDefaultValue,
-  useContextSelectAtom,
-  useClearError,
-  useSetTouched,
 } from "./internal/hooks";
 import {
+  formPropsAtom,
   hasBeenSubmittedAtom,
   isSubmittingAtom,
   isValidAtom,
-  registerReceiveFocusAtom,
-  validateFieldAtom,
 } from "./internal/state";
 
 /**
@@ -30,7 +27,7 @@ import {
  */
 export const useIsSubmitting = (formId?: string) => {
   const formContext = useInternalFormContext(formId, "useIsSubmitting");
-  return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+  return useFormAtomValue(isSubmittingAtom(formContext.formId));
 };
 
 /**
@@ -40,7 +37,7 @@ export const useIsSubmitting = (formId?: string) => {
  */
 export const useIsValid = (formId?: string) => {
   const formContext = useInternalFormContext(formId, "useIsValid");
-  return useContextSelectAtom(formContext.formId, isValidAtom);
+  return useFormAtomValue(isValidAtom(formContext.formId));
 };
 
 export type FieldProps = {
@@ -97,26 +94,18 @@ export const useField = (
     formId?: string;
   }
 ): FieldProps => {
-  const { handleReceiveFocus, formId: providedFormId } = options ?? {};
+  const { formId: providedFormId, handleReceiveFocus } = options ?? {};
   const formContext = useInternalFormContext(providedFormId, "useField");
 
   const defaultValue = useFieldDefaultValue(name, formContext);
-  const touched = useFieldTouched(name, formContext);
-  const error = useFieldError(name, formContext);
+  const [touched, setTouched] = useFieldTouched(name, formContext);
+  const [error, setError] = useFieldError(name, formContext);
 
-  const clearError = useClearError(formContext);
-  const setTouched = useSetTouched(formContext);
-  const hasBeenSubmitted = useContextSelectAtom(
-    formContext.formId,
-    hasBeenSubmittedAtom
+  const hasBeenSubmitted = useFormAtomValue(
+    hasBeenSubmittedAtom(formContext.formId)
   );
-  const validateField = useContextSelectAtom(
-    formContext.formId,
-    validateFieldAtom
-  );
-  const registerReceiveFocus = useContextSelectAtom(
-    formContext.formId,
-    registerReceiveFocusAtom
+  const { validateField, registerReceiveFocus } = useFormAtomValue(
+    formPropsAtom(formContext.formId)
   );
 
   useEffect(() => {
@@ -127,13 +116,13 @@ export const useField = (
   const field = useMemo<FieldProps>(() => {
     const helpers = {
       error,
-      clearError: () => clearError(name),
+      clearError: () => setError(undefined),
       validate: () => {
         validateField(name);
       },
       defaultValue,
       touched,
-      setTouched: (touched: boolean) => setTouched(name, touched),
+      setTouched,
     };
     const getInputProps = createGetInputProps({
       ...helpers,
@@ -149,12 +138,12 @@ export const useField = (
     error,
     defaultValue,
     touched,
+    setTouched,
     name,
     hasBeenSubmitted,
     options?.validationBehavior,
-    clearError,
+    setError,
     validateField,
-    setTouched,
   ]);
 
   return field;

package/src/internal/getInputProps.ts

@@ -1,4 +1,6 @@
 import omitBy from "lodash/omitBy";
+import { getCheckboxChecked } from "./logic/getCheckboxChecked";
+import { getRadioChecked } from "./logic/getRadioChecked";
 
 export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
 
@@ -41,13 +43,6 @@ const defaultValidationBehavior: ValidationBehaviorOptions = {
   whenSubmitted: "onChange",
 };
 
-const getCheckboxDefaultChecked = (value: string, defaultValue: any) => {
-  if (Array.isArray(defaultValue)) return defaultValue.includes(value);
-  if (typeof defaultValue === "boolean") return defaultValue;
-  if (typeof defaultValue === "string") return defaultValue === value;
-  return undefined;
-};
-
 export const createGetInputProps = ({
   clearError,
   validate,
@@ -86,14 +81,9 @@ export const createGetInputProps = ({
     };
 
     if (props.type === "checkbox") {
-      const value = props.value ?? "on";
-      inputProps.defaultChecked = getCheckboxDefaultChecked(
-        value,
-        defaultValue
-      );
+      inputProps.defaultChecked = getCheckboxChecked(props.value, defaultValue);
     } else if (props.type === "radio") {
-      const value = props.value ?? "on";
-      inputProps.defaultChecked = defaultValue === value;
+      inputProps.defaultChecked = getRadioChecked(props.value, defaultValue);
     } else {
       inputProps.defaultValue = defaultValue;
     }

package/src/internal/hooks.ts

@@ -1,26 +1,32 @@
 import { useActionData, useMatches, useTransition } from "@remix-run/react";
-import { Atom } from "jotai";
+import { Atom, useAtom, WritableAtom } from "jotai";
 import { useAtomValue, useUpdateAtom } from "jotai/utils";
 import lodashGet from "lodash/get";
-import identity from "lodash/identity";
-import { useCallback, useContext, useMemo } from "react";
-import { ValidationErrorResponseData } from "..";
+import { useCallback, useContext } from "react";
+import invariant from "tiny-invariant";
+import { FieldErrors, ValidationErrorResponseData } from "..";
 import { formDefaultValuesKey } from "./constants";
 import { InternalFormContext, InternalFormContextValue } from "./formContext";
+import { Hydratable, hydratable } from "./hydratable";
 import {
   ATOM_SCOPE,
-  clearErrorAtom,
-  fieldDefaultValueAtom,
   fieldErrorAtom,
   fieldTouchedAtom,
-  FormAtom,
-  formRegistry,
+  formPropsAtom,
   isHydratedAtom,
+  setFieldErrorAtom,
   setTouchedAtom,
 } from "./state";
 
-type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
-const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_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);
 
 export const useInternalFormContext = (
   formId?: string | symbol,
@@ -36,28 +42,6 @@ export const useInternalFormContext = (
   );
 };
 
-export const useContextSelectAtom = <T>(
-  formId: string | symbol,
-  selectorAtomCreator: FormSelectorAtomCreator<T>
-) => {
-  const formAtom = formRegistry(formId);
-  const selectorAtom = useMemo(
-    () => selectorAtomCreator(formAtom),
-    [formAtom, selectorAtomCreator]
-  );
-  return useAtomValue(selectorAtom, ATOM_SCOPE);
-};
-
-export const useHydratableSelector = <T, U>(
-  { formId }: InternalFormContextValue,
-  atomCreator: FormSelectorAtomCreator<T>,
-  dataToUse: U | typeof USE_HYDRATED_STATE,
-  selector: (data: U) => T = identity
-) => {
-  const dataFromState = useContextSelectAtom(formId, atomCreator);
-  return dataToUse === USE_HYDRATED_STATE ? dataFromState : selector(dataToUse);
-};
-
 export function useErrorResponseForForm({
   fetcher,
   subaction,
@@ -84,10 +68,12 @@ export function useErrorResponseForForm({
   return null;
 }
 
-export const useFieldErrorsForForm = (context: InternalFormContextValue) => {
+export const useFieldErrorsForForm = (
+  context: InternalFormContextValue
+): Hydratable<FieldErrors | undefined> => {
   const response = useErrorResponseForForm(context);
-  const hydrated = useContextSelectAtom(context.formId, isHydratedAtom);
-  return hydrated ? USE_HYDRATED_STATE : response?.fieldErrors;
+  const hydrated = useFormAtomValue(isHydratedAtom(context.formId));
+  return hydratable.from(response?.fieldErrors, hydrated);
 };
 
 export const useDefaultValuesFromLoader = ({
@@ -107,9 +93,11 @@ export const useDefaultValuesFromLoader = ({
   return null;
 };
 
-export const useDefaultValuesForForm = (context: InternalFormContextValue) => {
+export const useDefaultValuesForForm = (
+  context: InternalFormContextValue
+): Hydratable<{ [fieldName: string]: any }> => {
   const { formId, defaultValuesProp } = context;
-  const hydrated = useContextSelectAtom(formId, isHydratedAtom);
+  const hydrated = useFormAtomValue(isHydratedAtom(formId));
   const errorResponse = useErrorResponseForForm(context);
   const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
 
@@ -119,10 +107,17 @@ export const useDefaultValuesForForm = (context: InternalFormContextValue) => {
   // - State gets hydrated with default values
   // - After submit, we may need to use values from the error
 
-  if (hydrated) return USE_HYDRATED_STATE;
-  if (errorResponse?.repopulateFields) return errorResponse.repopulateFields;
-  if (defaultValuesProp) return defaultValuesProp;
-  return defaultValuesFromLoader;
+  if (hydrated) return hydratable.hydratedData();
+  if (errorResponse?.repopulateFields) {
+    invariant(
+      typeof errorResponse.repopulateFields === "object",
+      "repopulateFields returned something other than an object"
+    );
+    return hydratable.serverData(errorResponse.repopulateFields);
+  }
+  if (defaultValuesProp) return hydratable.serverData(defaultValuesProp);
+
+  return hydratable.serverData(defaultValuesFromLoader);
 };
 
 export const useHasActiveFormSubmit = ({
@@ -136,56 +131,49 @@ export const useHasActiveFormSubmit = ({
 };
 
 export const useFieldTouched = (
-  name: string,
+  field: string,
   { formId }: InternalFormContextValue
-) => {
-  const atomCreator = useMemo(() => fieldTouchedAtom(name), [name]);
-  return useContextSelectAtom(formId, atomCreator);
-};
+) => useFormAtom(fieldTouchedAtom({ formId, field }));
 
 export const useFieldError = (
   name: string,
   context: InternalFormContextValue
 ) => {
-  return useHydratableSelector(
-    context,
-    useMemo(() => fieldErrorAtom(name), [name]),
-    useFieldErrorsForForm(context),
-    (fieldErrors) => fieldErrors?.[name]
+  const fieldErrors = useFieldErrorsForForm(context);
+  const [state, set] = useFormAtom(
+    fieldErrorAtom({ formId: context.formId, field: name })
   );
+  return [
+    fieldErrors.map((fieldErrors) => fieldErrors?.[name]).hydrateTo(state),
+    set,
+  ] as const;
 };
 
 export const useFieldDefaultValue = (
   name: string,
   context: InternalFormContextValue
 ) => {
-  return useHydratableSelector(
-    context,
-    useMemo(() => fieldDefaultValueAtom(name), [name]),
-    useDefaultValuesForForm(context),
-    (val) => lodashGet(val, name)
+  const defaultValues = useDefaultValuesForForm(context);
+  const { defaultValues: state } = useFormAtomValue(
+    formPropsAtom(context.formId)
   );
+  return defaultValues
+    .map((val) => lodashGet(val, name))
+    .hydrateTo(state[name]);
 };
 
-export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
-  useUpdateAtom(atom, ATOM_SCOPE);
-
-export const useClearError = (context: InternalFormContextValue) => {
-  const clearError = useFormUpdateAtom(clearErrorAtom);
+export const useClearError = ({ formId }: InternalFormContextValue) => {
+  const updateError = useFormUpdateAtom(setFieldErrorAtom(formId));
   return useCallback(
-    (name: string) => {
-      clearError({ name, formAtom: formRegistry(context.formId) });
-    },
-    [clearError, context.formId]
+    (name: string) => updateError({ field: name, error: undefined }),
+    [updateError]
   );
 };
 
-export const useSetTouched = (context: InternalFormContextValue) => {
-  const setTouched = useFormUpdateAtom(setTouchedAtom);
+export const useSetTouched = ({ formId }: InternalFormContextValue) => {
+  const setTouched = useFormUpdateAtom(setTouchedAtom(formId));
   return useCallback(
-    (name: string, touched: boolean) => {
-      setTouched({ name, formAtom: formRegistry(context.formId), touched });
-    },
-    [setTouched, context.formId]
+    (name: string, touched: boolean) => setTouched({ field: name, touched }),
+    [setTouched]
   );
 };

package/src/internal/hydratable.ts

@@ -0,0 +1,28 @@
+/**
+ * The purpose of this type is to simplify the logic
+ * around data that needs to come from the server initially,
+ * but from the internal state after hydration.
+ */
+export type Hydratable<T> = {
+  hydrateTo: (data: T) => T;
+  map: <U>(fn: (data: T) => U) => Hydratable<U>;
+};
+
+const serverData = <T>(data: T): Hydratable<T> => ({
+  hydrateTo: () => data,
+  map: (fn) => serverData(fn(data)),
+});
+
+const hydratedData = <T>(): Hydratable<T> => ({
+  hydrateTo: (hydratedData: T) => hydratedData,
+  map: <U>() => hydratedData<U>(),
+});
+
+const from = <T>(data: T, hydrated: boolean): Hydratable<T> =>
+  hydrated ? hydratedData<T>() : serverData<T>(data);
+
+export const hydratable = {
+  serverData,
+  hydratedData,
+  from,
+};

package/src/internal/logic/getCheckboxChecked.ts

@@ -0,0 +1,10 @@
+export const getCheckboxChecked = (
+  checkboxValue: string | undefined = "on",
+  newValue: unknown
+): boolean | undefined => {
+  if (Array.isArray(newValue))
+    return newValue.some((val) => val === true || val === checkboxValue);
+  if (typeof newValue === "boolean") return newValue;
+  if (typeof newValue === "string") return newValue === checkboxValue;
+  return undefined;
+};

package/src/internal/logic/getRadioChecked.ts

@@ -0,0 +1,7 @@
+export const getRadioChecked = (
+  radioValue: string | undefined = "on",
+  newValue: unknown
+) => {
+  if (typeof newValue === "string") return newValue === radioValue;
+  return undefined;
+};

package/src/internal/state/atomUtils.ts

@@ -0,0 +1,13 @@
+import { Atom, atom } from "jotai";
+import { atomFamily } from "jotai/utils";
+import isEqual from "lodash/isEqual";
+
+export type InternalFormId = string | symbol;
+
+export const formAtomFamily = <T>(data: T) =>
+  atomFamily((_: InternalFormId) => atom(data));
+
+export type FieldAtomKey = { formId: InternalFormId; field: string };
+export const fieldAtomFamily = <T extends Atom<unknown>>(
+  func: (key: FieldAtomKey) => T
+) => atomFamily(func, isEqual);