remix-validated-form 4.0.2 → 4.1.0-beta.1

package/build/validation/createValidator.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createValidator = void 0;
+const constants_1 = require("../internal/constants");
 const flatten_1 = require("../internal/flatten");
 const preprocessFormData = (data) => {
     // A slightly janky way of determining if the data is a FormData object
@@ -25,14 +26,17 @@ function createValidator(validator) {
                     error: {
                         fieldErrors: result.error,
                         subaction: data.subaction,
+                        formId: data[constants_1.FORM_ID_FIELD],
                     },
                     submittedData: data,
+                    formId: data[constants_1.FORM_ID_FIELD],
                 };
             }
             return {
                 data: result.data,
                 error: undefined,
                 submittedData: data,
+                formId: data[constants_1.FORM_ID_FIELD],
             };
         },
         validateField: (data, field) => validator.validateField(preprocessFormData(data), field),

package/build/validation/types.d.ts

@@ -5,15 +5,18 @@ export declare type GenericObject = {
 };
 export declare type ValidatorError = {
     subaction?: string;
+    formId?: string;
     fieldErrors: FieldErrors;
 };
 export declare type ValidationErrorResponseData = {
     subaction?: string;
+    formId?: string;
     fieldErrors: FieldErrors;
     repopulateFields?: unknown;
 };
 export declare type BaseResult = {
     submittedData: GenericObject;
+    formId?: string;
 };
 export declare type ErrorResult = BaseResult & {
     error: ValidatorError;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.0.2",
+  "version": "4.1.0-beta.1",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -48,6 +48,8 @@
     "typescript": "^4.5.3"
   },
   "dependencies": {
+    "immer": "^9.0.12",
+    "jotai": "^1.5.3",
     "lodash": "^4.17.21",
     "tiny-invariant": "^1.2.0"
   }

package/src/ValidatedForm.tsx

@@ -1,31 +1,45 @@
-import {
-  Form as RemixForm,
-  useActionData,
-  useFetcher,
-  useFormAction,
-  useSubmit,
-  useTransition,
-} from "@remix-run/react";
-import { Fetcher } from "@remix-run/react/transition";
+import { Form as RemixForm, useFetcher, useSubmit } from "@remix-run/react";
 import uniq from "lodash/uniq";
 import React, {
   ComponentProps,
+  RefObject,
+  useCallback,
   useEffect,
   useMemo,
   useRef,
   useState,
 } from "react";
 import invariant from "tiny-invariant";
-import { FormContext, FormContextValue } from "./internal/formContext";
+import { useIsSubmitting, useIsValid } from "./hooks";
+import { FORM_ID_FIELD } from "./internal/constants";
+import {
+  InternalFormContext,
+  InternalFormContextValue,
+} from "./internal/formContext";
+import {
+  useDefaultValuesFromLoader,
+  useErrorResponseForForm,
+  useFormUpdateAtom,
+  useHasActiveFormSubmit,
+} from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
+import {
+  addErrorAtom,
+  clearErrorAtom,
+  endSubmitAtom,
+  formRegistry,
+  FormState,
+  resetAtom,
+  setFieldErrorsAtom,
+  startSubmitAtom,
+  syncFormContextAtom,
+} from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
-import { omit, mergeRefs } from "./internal/util";
 import {
-  FieldErrors,
-  Validator,
-  TouchedFields,
-  ValidationErrorResponseData,
-} from "./validation/types";
+  mergeRefs,
+  useIsomorphicLayoutEffect as useLayoutEffect,
+} from "./internal/util";
+import { FieldErrors, Validator } from "./validation/types";
 
 export type FormProps<DataType> = {
   /**
@@ -74,82 +88,8 @@ export type FormProps<DataType> = {
   disableFocusOnError?: boolean;
 } & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
 
-function useErrorResponseForThisForm(
-  fetcher?: ReturnType<typeof useFetcher>,
-  subaction?: string
-): 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 (
-    (!subaction && !actionData.subaction) ||
-    actionData.subaction === subaction
-  )
-    return actionData;
-  return null;
-}
-
-function useFieldErrors(
-  fieldErrorsFromBackend?: FieldErrors
-): [FieldErrors, React.Dispatch<React.SetStateAction<FieldErrors>>] {
-  const [fieldErrors, setFieldErrors] = useState<FieldErrors>(
-    fieldErrorsFromBackend ?? {}
-  );
-  useEffect(() => {
-    if (fieldErrorsFromBackend) setFieldErrors(fieldErrorsFromBackend);
-  }, [fieldErrorsFromBackend]);
-
-  return [fieldErrors, setFieldErrors];
-}
-
-const useIsSubmitting = (
-  fetcher?: Fetcher
-): [boolean, () => void, () => void] => {
-  const [isSubmitStarted, setSubmitStarted] = useState(false);
-  const transition = useTransition();
-  const hasActiveSubmission = fetcher
-    ? fetcher.state === "submitting"
-    : !!transition.submission;
-
-  const startSubmit = () => setSubmitStarted(true);
-  const endSubmit = () => setSubmitStarted(false);
-
-  useSubmitComplete(hasActiveSubmission, () => {
-    endSubmit();
-  });
-
-  return [isSubmitStarted, startSubmit, endSubmit];
-};
-
 const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
 
-/**
- * The purpose for this logic is to handle validation errors when javascript is disabled.
- * Normally (without js), when a form is submitted and the action returns the validation errors,
- * the form will be reset. The errors will be displayed on the correct fields,
- * but all the values in the form will be gone. This is not good UX.
- *
- * To get around this, we return the submitted form data from the server,
- * and use those to populate the form via `defaultValues`.
- * This results in a more seamless UX akin to what you would see when js is enabled.
- *
- * One potential downside is that resetting the form will reset the form
- * to the _new_ default values that were returned from the server with the validation errors.
- * However, this case is less of a problem than the janky UX caused by losing the form values.
- * It will only ever be a problem if the form includes a `<button type="reset" />`
- * and only if JS is disabled.
- */
-function useDefaultValues<DataType>(
-  repopulateFieldsFromBackend?: any,
-  defaultValues?: Partial<DataType>
-) {
-  return repopulateFieldsFromBackend ?? defaultValues;
-}
-
 function nonNull<T>(value: T | null | undefined): value is T {
   return value !== null;
 }
@@ -204,6 +144,33 @@ const focusFirstInvalidInput = (
   }
 };
 
+const useFormId = (providedId?: string): string | symbol => {
+  // We can use a `Symbol` here because we only use it after hydration
+  const [symbolId] = useState(() => Symbol("remix-validated-form-id"));
+  return providedId ?? symbolId;
+};
+
+/**
+ * Use a component to access the state so we don't cause
+ * any extra rerenders of the whole form.
+ */
+const FormResetter = ({
+  resetAfterSubmit,
+  formRef,
+}: {
+  resetAfterSubmit: boolean;
+  formRef: RefObject<HTMLFormElement>;
+}) => {
+  const isSubmitting = useIsSubmitting();
+  const isValid = useIsValid();
+  useSubmitComplete(isSubmitting, () => {
+    if (isValid && resetAfterSubmit) {
+      formRef.current?.reset();
+    }
+  });
+  return null;
+};
+
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -213,102 +180,104 @@ export function ValidatedForm<DataType>({
   children,
   fetcher,
   action,
-  defaultValues,
+  defaultValues: providedDefaultValues,
   formRef: formRefProp,
   onReset,
   subaction,
-  resetAfterSubmit,
+  resetAfterSubmit = false,
   disableFocusOnError,
   method,
   replace,
+  id,
   ...rest
 }: FormProps<DataType>) {
-  const backendError = useErrorResponseForThisForm(fetcher, subaction);
-  const [fieldErrors, setFieldErrors] = useFieldErrors(
-    backendError?.fieldErrors
+  const formId = useFormId(id);
+  const formAtom = formRegistry(formId);
+  const contextValue = useMemo<InternalFormContextValue>(
+    () => ({
+      formId,
+      action,
+      subaction,
+      defaultValuesProp: providedDefaultValues,
+      fetcher,
+    }),
+    [action, fetcher, formId, providedDefaultValues, subaction]
   );
-  const [isSubmitting, startSubmit, endSubmit] = useIsSubmitting(fetcher);
+  const backendError = useErrorResponseForForm(contextValue);
+  const backendDefaultValues = useDefaultValuesFromLoader(contextValue);
+  const hasActiveSubmission = useHasActiveFormSubmit(contextValue);
+  const formRef = useRef<HTMLFormElement>(null);
+  const Form = fetcher?.Form ?? RemixForm;
 
-  const defaultsToUse = useDefaultValues(
-    backendError?.repopulateFields,
-    defaultValues
-  );
-  const [touchedFields, setTouchedFields] = useState<TouchedFields>({});
-  const [hasBeenSubmitted, setHasBeenSubmitted] = useState(false);
   const submit = useSubmit();
-  const formRef = useRef<HTMLFormElement>(null);
-  useSubmitComplete(isSubmitting, () => {
-    endSubmit();
-    if (!backendError && resetAfterSubmit) {
-      formRef.current?.reset();
-    }
-  });
+  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 validateField: FormState["validateField"] = useCallback(
+    async (fieldName) => {
+      invariant(formRef.current, "Cannot find reference to form");
+      const { error } = await validator.validateField(
+        getDataFromForm(formRef.current),
+        fieldName as any
+      );
+
+      if (error) {
+        addError({ formAtom, name: fieldName, error });
+        return error;
+      } else {
+        clearError({ name: fieldName, formAtom });
+        return null;
+      }
+    },
+    [addError, clearError, formAtom, validator]
+  );
+
   const customFocusHandlers = useMultiValueMap<string, () => void>();
+  const registerReceiveFocus: FormState["registerReceiveFocus"] = useCallback(
+    (fieldName, handler) => {
+      customFocusHandlers().add(fieldName, handler);
+      return () => {
+        customFocusHandlers().remove(fieldName, handler);
+      };
+    },
+    [customFocusHandlers]
+  );
 
-  const contextValue = useMemo<FormContextValue>(
-    () => ({
-      fieldErrors,
+  useLayoutEffect(() => {
+    syncFormContext({
+      formAtom,
       action,
-      defaultValues: defaultsToUse,
-      isSubmitting,
-      isValid: Object.keys(fieldErrors).length === 0,
-      touchedFields,
-      setFieldTouched: (fieldName: string, touched: boolean) =>
-        setTouchedFields((prev) => ({
-          ...prev,
-          [fieldName]: touched,
-        })),
-      clearError: (fieldName) => {
-        setFieldErrors((prev) => omit(prev, fieldName));
-      },
-      validateField: async (fieldName) => {
-        invariant(formRef.current, "Cannot find reference to form");
-        const { error } = await validator.validateField(
-          getDataFromForm(formRef.current),
-          fieldName as any
-        );
+      defaultValues: providedDefaultValues ?? backendDefaultValues,
+      subaction,
+      validateField,
+      registerReceiveFocus,
+    });
+  }, [
+    action,
+    formAtom,
+    providedDefaultValues,
+    registerReceiveFocus,
+    subaction,
+    syncFormContext,
+    validateField,
+    backendDefaultValues,
+  ]);
 
-        // By checking and returning `prev` here, we can avoid a re-render
-        // if the validation state is the same.
-        if (error) {
-          setFieldErrors((prev) => {
-            if (prev[fieldName] === error) return prev;
-            return {
-              ...prev,
-              [fieldName]: error,
-            };
-          });
-          return error;
-        } else {
-          setFieldErrors((prev) => {
-            if (!(fieldName in prev)) return prev;
-            return omit(prev, fieldName);
-          });
-          return null;
-        }
-      },
-      registerReceiveFocus: (fieldName, handler) => {
-        customFocusHandlers().add(fieldName, handler);
-        return () => {
-          customFocusHandlers().remove(fieldName, handler);
-        };
-      },
-      hasBeenSubmitted,
-    }),
-    [
-      fieldErrors,
-      action,
-      defaultsToUse,
-      isSubmitting,
-      touchedFields,
-      hasBeenSubmitted,
-      setFieldErrors,
-      validator,
-      customFocusHandlers,
-    ]
-  );
+  useEffect(() => {
+    setFieldErrors({
+      fieldErrors: backendError?.fieldErrors ?? {},
+      formAtom,
+    });
+  }, [backendError?.fieldErrors, formAtom, setFieldErrors]);
 
-  const Form = fetcher?.Form ?? RemixForm;
+  useSubmitComplete(hasActiveSubmission, () => {
+    endSubmit({ formAtom });
+  });
 
   let clickedButtonRef = React.useRef<any>();
   useEffect(() => {
@@ -340,19 +309,19 @@ export function ValidatedForm<DataType>({
     <Form
       ref={mergeRefs([formRef, formRefProp])}
       {...rest}
+      id={id}
       action={action}
       method={method}
       replace={replace}
       onSubmit={async (e) => {
         e.preventDefault();
-        setHasBeenSubmitted(true);
-        startSubmit();
+        startSubmit({ formAtom });
         const result = await validator.validate(
           getDataFromForm(e.currentTarget)
         );
         if (result.error) {
-          endSubmit();
-          setFieldErrors(result.error.fieldErrors);
+          endSubmit({ formAtom });
+          setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
           if (!disableFocusOnError) {
             focusFirstInvalidInput(
               result.error.fieldErrors,
@@ -361,7 +330,7 @@ export function ValidatedForm<DataType>({
             );
           }
         } else {
-          onSubmit && onSubmit(result.data, e);
+          onSubmit?.(result.data, e);
           if (fetcher)
             fetcher.submit(clickedButtonRef.current || e.currentTarget);
           else
@@ -375,17 +344,17 @@ export function ValidatedForm<DataType>({
       onReset={(event) => {
         onReset?.(event);
         if (event.defaultPrevented) return;
-        setFieldErrors({});
-        setTouchedFields({});
-        setHasBeenSubmitted(false);
+        reset({ formAtom });
       }}
     >
-      <FormContext.Provider value={contextValue}>
+      <InternalFormContext.Provider value={contextValue}>
+        <FormResetter formRef={formRef} resetAfterSubmit={resetAfterSubmit} />
         {subaction && (
           <input type="hidden" value={subaction} name="subaction" />
         )}
+        {id && <input type="hidden" value={id} name={FORM_ID_FIELD} />}
         {children}
-      </FormContext.Provider>
+      </InternalFormContext.Provider>
     </Form>
   );
 }

package/src/hooks.ts

@@ -1,21 +1,44 @@
-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 {
+  useUnknownFormContextSelectAtom,
+  useInternalFormContext,
+  useFieldTouched,
+  useFieldError,
+  useFieldDefaultValue,
+  useContextSelectAtom,
+  useClearError,
+  useSetTouched,
+} from "./internal/hooks";
+import {
+  hasBeenSubmittedAtom,
+  isSubmittingAtom,
+  isValidAtom,
+  registerReceiveFocusAtom,
+  validateFieldAtom,
+} from "./internal/state";
 
-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 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) =>
+  useUnknownFormContextSelectAtom(formId, isSubmittingAtom, "useIsSubmitting");
+
+/**
+ * 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) =>
+  useUnknownFormContextSelectAtom(formId, isValidAtom, "useIsValid");
 
 export type FieldProps = {
   /**
@@ -64,21 +87,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 +123,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 +143,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}`;