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

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,
@@ -32,32 +38,10 @@ export const useInternalFormContext = (
   if (formContext) return formContext;
 
   throw new Error(
-    `Unable to determine form for ${hookName}. Please use it inside a form or pass a 'formId'.`
+    `Unable to determine form for ${hookName}. Please use it inside a ValidatedForm or pass a 'formId'.`
   );
 };
 
-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);