remix-validated-form 4.0.1 → 4.1.0-beta.3

package/src/hooks.ts

@@ -1,20 +1,46 @@
-import get from "lodash/get";
-import toPath from "lodash/toPath";
-import { useContext, useEffect, useMemo } from "react";
-import { FormContext } from "./internal/formContext";
+import { useEffect, useMemo } from "react";
 import {
   createGetInputProps,
   GetInputProps,
   ValidationBehaviorOptions,
 } from "./internal/getInputProps";
+import {
+  useInternalFormContext,
+  useFieldTouched,
+  useFieldError,
+  useFieldDefaultValue,
+  useContextSelectAtom,
+  useClearError,
+  useSetTouched,
+} from "./internal/hooks";
+import {
+  hasBeenSubmittedAtom,
+  isSubmittingAtom,
+  isValidAtom,
+  registerReceiveFocusAtom,
+  validateFieldAtom,
+} from "./internal/state";
+
+/**
+ * Returns whether or not the parent form is currently being submitted.
+ * This is different from remix's `useTransition().submission` in that it
+ * is aware of what form it's in and when _that_ form is being submitted.
+ *
+ * @param formId
+ */
+export const useIsSubmitting = (formId?: string) => {
+  const formContext = useInternalFormContext(formId, "useIsSubmitting");
+  return useContextSelectAtom(formContext.formId, isSubmittingAtom);
+};
 
-const useInternalFormContext = (hookName: string) => {
-  const context = useContext(FormContext);
-  if (!context)
-    throw new Error(
-      `${hookName} must be used within a ValidatedForm component`
-    );
-  return context;
+/**
+ * Returns whether or not the current form is valid.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export const useIsValid = (formId?: string) => {
+  const formContext = useInternalFormContext(formId, "useIsValid");
+  return useContextSelectAtom(formContext.formId, isValidAtom);
 };
 
 export type FieldProps = {
@@ -64,21 +90,34 @@ export const useField = (
      * Allows you to specify when a field gets validated (when using getInputProps)
      */
     validationBehavior?: Partial<ValidationBehaviorOptions>;
+    /**
+     * The formId of the form you want to use.
+     * This is not necesary if the input is used inside a form.
+     */
+    formId?: string;
   }
 ): FieldProps => {
-  const {
-    fieldErrors,
-    clearError,
-    validateField,
-    defaultValues,
-    registerReceiveFocus,
-    touchedFields,
-    setFieldTouched,
-    hasBeenSubmitted,
-  } = useInternalFormContext("useField");
+  const { handleReceiveFocus, formId: providedFormId } = options ?? {};
+  const formContext = useInternalFormContext(providedFormId, "useField");
+
+  const defaultValue = useFieldDefaultValue(name, formContext);
+  const touched = useFieldTouched(name, formContext);
+  const error = useFieldError(name, formContext);
 
-  const isTouched = !!touchedFields[name];
-  const { handleReceiveFocus } = options ?? {};
+  const clearError = useClearError(formContext);
+  const setTouched = useSetTouched(formContext);
+  const hasBeenSubmitted = useContextSelectAtom(
+    formContext.formId,
+    hasBeenSubmittedAtom
+  );
+  const validateField = useContextSelectAtom(
+    formContext.formId,
+    validateFieldAtom
+  );
+  const registerReceiveFocus = useContextSelectAtom(
+    formContext.formId,
+    registerReceiveFocusAtom
+  );
 
   useEffect(() => {
     if (handleReceiveFocus)
@@ -87,18 +126,14 @@ export const useField = (
 
   const field = useMemo<FieldProps>(() => {
     const helpers = {
-      error: fieldErrors[name],
-      clearError: () => {
-        clearError(name);
-      },
+      error,
+      clearError: () => clearError(name),
       validate: () => {
         validateField(name);
       },
-      defaultValue: defaultValues
-        ? get(defaultValues, toPath(name), undefined)
-        : undefined,
-      touched: isTouched,
-      setTouched: (touched: boolean) => setFieldTouched(name, touched),
+      defaultValue,
+      touched,
+      setTouched: (touched: boolean) => setTouched(name, touched),
     };
     const getInputProps = createGetInputProps({
       ...helpers,
@@ -111,34 +146,16 @@ export const useField = (
       getInputProps,
     };
   }, [
-    fieldErrors,
+    error,
+    defaultValue,
+    touched,
     name,
-    defaultValues,
-    isTouched,
     hasBeenSubmitted,
     options?.validationBehavior,
     clearError,
     validateField,
-    setFieldTouched,
+    setTouched,
   ]);
 
   return field;
 };
-
-/**
- * Provides access to the entire form context.
- */
-export const useFormContext = () => useInternalFormContext("useFormContext");
-
-/**
- * Returns whether or not the parent form is currently being submitted.
- * This is different from remix's `useTransition().submission` in that it
- * is aware of what form it's in and when _that_ form is being submitted.
- */
-export const useIsSubmitting = () =>
-  useInternalFormContext("useIsSubmitting").isSubmitting;
-
-/**
- * Returns whether or not the current form is valid.
- */
-export const useIsValid = () => useInternalFormContext("useIsValid").isValid;

package/src/index.ts

@@ -3,4 +3,4 @@ export * from "./server";
 export * from "./ValidatedForm";
 export * from "./validation/types";
 export * from "./validation/createValidator";
-export type { FormContextValue } from "./internal/formContext";
+export * from "./userFacingFormContext";

package/src/internal/constants.ts

@@ -0,0 +1,4 @@
+export const FORM_ID_FIELD = "__rvfInternalFormId" as const;
+export const FORM_DEFAULTS_FIELD = "__rvfInternalFormDefaults" as const;
+export const formDefaultValuesKey = (formId: string) =>
+  `${FORM_DEFAULTS_FIELD}_${formId}`;

package/src/internal/formContext.ts

@@ -1,54 +1,13 @@
+import { useFetcher } from "@remix-run/react";
 import { createContext } from "react";
-import { FieldErrors, TouchedFields } from "../validation/types";
 
-export type FormContextValue = {
-  /**
-   * All the errors in all the fields in the form.
-   */
-  fieldErrors: FieldErrors;
-  /**
-   * Clear the errors of the specified fields.
-   */
-  clearError: (...names: string[]) => void;
-  /**
-   * Validate the specified field.
-   */
-  validateField: (fieldName: string) => Promise<string | null>;
-  /**
-   * The `action` prop of the form.
-   */
+export type InternalFormContextValue = {
+  formId: string | symbol;
   action?: string;
-  /**
-   * Whether or not the form is submitting.
-   */
-  isSubmitting: boolean;
-  /**
-   * Whether or not a submission has been attempted.
-   * This is true once the form has been submitted, even if there were validation errors.
-   * Resets to false when the form is reset.
-   */
-  hasBeenSubmitted: boolean;
-  /**
-   * Whether or not the form is valid.
-   */
-  isValid: boolean;
-  /**
-   * The default values of the form.
-   */
-  defaultValues?: { [fieldName: string]: any };
-  /**
-   * Register a custom focus handler to be used when
-   * the field needs to receive focus due to a validation error.
-   */
-  registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
-  /**
-   * Any fields that have been touched by the user.
-   */
-  touchedFields: TouchedFields;
-  /**
-   * Change the touched state of the specified field.
-   */
-  setFieldTouched: (fieldName: string, touched: boolean) => void;
+  subaction?: string;
+  defaultValuesProp?: { [fieldName: string]: any };
+  fetcher?: ReturnType<typeof useFetcher>;
 };
 
-export const FormContext = createContext<FormContextValue | null>(null);
+export const InternalFormContext =
+  createContext<InternalFormContextValue | null>(null);

package/src/internal/getInputProps.ts

@@ -1,3 +1,5 @@
+import omitBy from "lodash/omitBy";
+
 export type ValidationBehavior = "onBlur" | "onChange" | "onSubmit";
 
 export type ValidationBehaviorOptions = {
@@ -68,7 +70,7 @@ export const createGetInputProps = ({
       ? validationBehaviors.whenTouched
       : validationBehaviors.initial;
 
-    const inputProps: T = {
+    const inputProps: MinimalInputProps = {
       ...props,
       onChange: (...args: unknown[]) => {
         if (behavior === "onChange") validate();
@@ -83,19 +85,19 @@ export const createGetInputProps = ({
       name,
     };
 
-    if (inputProps.type === "checkbox") {
+    if (props.type === "checkbox") {
       const value = props.value ?? "on";
       inputProps.defaultChecked = getCheckboxDefaultChecked(
         value,
         defaultValue
       );
-    } else if (inputProps.type === "radio") {
+    } else if (props.type === "radio") {
       const value = props.value ?? "on";
       inputProps.defaultChecked = defaultValue === value;
     } else {
       inputProps.defaultValue = defaultValue;
     }
 
-    return inputProps;
+    return omitBy(inputProps, (value) => value === undefined) as T;
   };
 };

package/src/internal/hooks.ts

@@ -0,0 +1,191 @@
+import { useActionData, useMatches, useTransition } from "@remix-run/react";
+import { Atom } 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 { formDefaultValuesKey } from "./constants";
+import { InternalFormContext, InternalFormContextValue } from "./formContext";
+import {
+  ATOM_SCOPE,
+  clearErrorAtom,
+  fieldDefaultValueAtom,
+  fieldErrorAtom,
+  fieldTouchedAtom,
+  FormAtom,
+  formRegistry,
+  isHydratedAtom,
+  setTouchedAtom,
+} from "./state";
+
+type FormSelectorAtomCreator<T> = (formState: FormAtom) => Atom<T>;
+const USE_HYDRATED_STATE = Symbol("USE_HYDRATED_STATE");
+
+export const useInternalFormContext = (
+  formId?: string | symbol,
+  hookName?: string
+) => {
+  const formContext = useContext(InternalFormContext);
+
+  if (formId) return { formId };
+  if (formContext) return formContext;
+
+  throw new Error(
+    `Unable to determine form for ${hookName}. Please use it inside a form 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,
+  formId,
+}: InternalFormContextValue): ValidationErrorResponseData | null {
+  const actionData = useActionData<any>();
+  if (fetcher) {
+    if ((fetcher.data as any)?.fieldErrors) return fetcher.data as any;
+    return null;
+  }
+
+  if (!actionData?.fieldErrors) return null;
+
+  // If there's an explicit id, we should ignore data that has the wrong id
+  if (typeof formId === "string" && actionData.formId)
+    return actionData.formId === formId ? actionData : null;
+
+  if (
+    (!subaction && !actionData.subaction) ||
+    actionData.subaction === subaction
+  )
+    return actionData;
+
+  return null;
+}
+
+export const useFieldErrorsForForm = (context: InternalFormContextValue) => {
+  const response = useErrorResponseForForm(context);
+  const hydrated = useContextSelectAtom(context.formId, isHydratedAtom);
+  return hydrated ? USE_HYDRATED_STATE : response?.fieldErrors;
+};
+
+export const useDefaultValuesFromLoader = ({
+  formId,
+}: InternalFormContextValue) => {
+  const matches = useMatches();
+  if (typeof formId === "string") {
+    const dataKey = formDefaultValuesKey(formId);
+    // If multiple loaders declare the same default values,
+    // we should use the data from the deepest route.
+    const match = matches
+      .reverse()
+      .find((match) => match.data && dataKey in match.data);
+    return match?.data[dataKey];
+  }
+
+  return null;
+};
+
+export const useDefaultValuesForForm = (context: InternalFormContextValue) => {
+  const { formId, defaultValuesProp } = context;
+  const hydrated = useContextSelectAtom(formId, isHydratedAtom);
+  const errorResponse = useErrorResponseForForm(context);
+  const defaultValuesFromLoader = useDefaultValuesFromLoader(context);
+
+  // Typical flow is:
+  // - Default values only available from props or server
+  //   - Props have a higher priority than server
+  // - 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;
+};
+
+export const useHasActiveFormSubmit = ({
+  fetcher,
+}: InternalFormContextValue): boolean => {
+  const transition = useTransition();
+  const hasActiveSubmission = fetcher
+    ? fetcher.state === "submitting"
+    : !!transition.submission;
+  return hasActiveSubmission;
+};
+
+export const useFieldTouched = (
+  name: string,
+  { formId }: InternalFormContextValue
+) => {
+  const atomCreator = useMemo(() => fieldTouchedAtom(name), [name]);
+  return useContextSelectAtom(formId, atomCreator);
+};
+
+export const useFieldError = (
+  name: string,
+  context: InternalFormContextValue
+) => {
+  return useHydratableSelector(
+    context,
+    useMemo(() => fieldErrorAtom(name), [name]),
+    useFieldErrorsForForm(context),
+    (fieldErrors) => fieldErrors?.[name]
+  );
+};
+
+export const useFieldDefaultValue = (
+  name: string,
+  context: InternalFormContextValue
+) => {
+  return useHydratableSelector(
+    context,
+    useMemo(() => fieldDefaultValueAtom(name), [name]),
+    useDefaultValuesForForm(context),
+    (val) => lodashGet(val, name)
+  );
+};
+
+export const useFormUpdateAtom: typeof useUpdateAtom = (atom) =>
+  useUpdateAtom(atom, ATOM_SCOPE);
+
+export const useClearError = (context: InternalFormContextValue) => {
+  const clearError = useFormUpdateAtom(clearErrorAtom);
+  return useCallback(
+    (name: string) => {
+      clearError({ name, formAtom: formRegistry(context.formId) });
+    },
+    [clearError, context.formId]
+  );
+};
+
+export const useSetTouched = (context: InternalFormContextValue) => {
+  const setTouched = useFormUpdateAtom(setTouchedAtom);
+  return useCallback(
+    (name: string, touched: boolean) => {
+      setTouched({ name, formAtom: formRegistry(context.formId), touched });
+    },
+    [setTouched, context.formId]
+  );
+};

package/src/internal/state.ts

@@ -0,0 +1,210 @@
+import { atom } from "jotai";
+import { atomWithImmer } from "jotai/immer";
+import { atomFamily, selectAtom } from "jotai/utils";
+import lodashGet from "lodash/get";
+import { FieldErrors, TouchedFields } from "../validation/types";
+
+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
+  formId?: string;
+  action?: string;
+  subaction?: string;
+  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 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 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 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 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 setFieldErrorsAtom = atom(
+  null,
+  (
+    get,
+    set,
+    { formAtom, fieldErrors }: { fieldErrors: FieldErrors; formAtom: FormAtom }
+  ) =>
+    set(formAtom, (state) => {
+      state.fieldErrors = fieldErrors;
+      return state;
+    })
+);
+
+export const setTouchedAtom = atom(
+  null,
+  (
+    get,
+    set,
+    { name, formAtom, touched }: FieldAtomArgs & { touched: boolean }
+  ) =>
+    set(formAtom, (state) => {
+      state.touchedFields[name] = touched;
+      return state;
+    })
+);
+
+export const resetAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.fieldErrors = {};
+      state.touchedFields = {};
+      state.hasBeenSubmitted = false;
+      return state;
+    });
+  }
+);
+
+export const startSubmitAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.hasBeenSubmitted = true;
+      state.isSubmitting = true;
+      return state;
+    });
+  }
+);
+
+export const endSubmitAtom = atom(
+  null,
+  (get, set, { formAtom }: { formAtom: FormAtom }) => {
+    set(formAtom, (state) => {
+      state.isSubmitting = false;
+      return state;
+    });
+  }
+);
+
+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;
+    });
+  }
+);

package/src/internal/util.ts

@@ -1,4 +1,5 @@
 import type React from "react";
+import { useEffect, useLayoutEffect } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -21,3 +22,6 @@ export const mergeRefs = <T = any>(
     });
   };
 };
+
+export const useIsomorphicLayoutEffect =
+  typeof window !== "undefined" ? useLayoutEffect : useEffect;