remix-validated-form 5.0.2 → 5.1.1-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "5.0.2",
+  "version": "5.1.1-beta.0",
   "description": "Form component and utils for easy form validation in remix",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -45,6 +45,8 @@
     "@types/lodash.get": "^4.4.7",
     "@types/react": "^18.0.9",
     "fetch-blob": "^3.1.3",
+    "immer": "^9.0.12",
+    "zustand": "^4.3.0",
     "react": "^18.1.0",
     "set-get": "*",
     "ts-toolbelt": "^9.6.0",
@@ -53,11 +55,9 @@
     "typescript": "^4.8.4"
   },
   "dependencies": {
-    "immer": "^9.0.12",
     "lodash.get": "^4.4.2",
     "nanoid": "3.3.6",
     "remeda": "^1.2.0",
-    "tiny-invariant": "^1.2.0",
-    "zustand": "^4.3.0"
+    "tiny-invariant": "^1.2.0"
   }
 }

package/src/ValidatedForm.tsx

@@ -1,427 +0,0 @@
-import {
-  FetcherWithComponents,
-  Form as RemixForm,
-  FormMethod,
-  useSubmit,
-  SubmitOptions,
-  FormEncType,
-} from "@remix-run/react";
-import React, {
-  ComponentProps,
-  FormEvent,
-  RefObject,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import * as R from "remeda";
-import { useIsSubmitting, useIsValid } from "./hooks";
-import { FORM_ID_FIELD } from "./internal/constants";
-import {
-  InternalFormContext,
-  InternalFormContextValue,
-} from "./internal/formContext";
-import {
-  useDefaultValuesFromLoader,
-  useErrorResponseForForm,
-  useHasActiveFormSubmit,
-  useSetFieldErrors,
-} from "./internal/hooks";
-import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
-import {
-  SyncedFormProps,
-  useRootFormStore,
-} from "./internal/state/createFormStore";
-import { useFormStore } from "./internal/state/storeHooks";
-import { useSubmitComplete } from "./internal/submissionCallbacks";
-import {
-  mergeRefs,
-  useDeepEqualsMemo,
-  useIsomorphicLayoutEffect as useLayoutEffect,
-} from "./internal/util";
-import { FieldErrors, Validator } from "./validation/types";
-
-type SubactionData<
-  DataType,
-  Subaction extends string | undefined
-> = DataType & { subaction: Subaction };
-
-// Not all validation libraries support encoding a literal value in the schema type (e.g. yup).
-// This condition here allows us to provide strictness for users who are using a validation library that does support it,
-// but also allows us to support users who are using a validation library that doesn't support it.
-type DataForSubaction<
-  DataType,
-  Subaction extends string | undefined
-> = Subaction extends string // Not all validation libraries support encoding a literal value in the schema type.
-  ? SubactionData<DataType, Subaction> extends undefined
-    ? DataType
-    : SubactionData<DataType, Subaction>
-  : DataType;
-
-export type FormProps<DataType, Subaction extends string | undefined> = {
-  /**
-   * A `Validator` object that describes how to validate the form.
-   */
-  validator: Validator<DataType>;
-  /**
-   * A submit callback that gets called when the form is submitted
-   * after all validations have been run.
-   */
-  onSubmit?: (
-    data: DataForSubaction<DataType, Subaction>,
-    event: React.FormEvent<HTMLFormElement>
-  ) => void | Promise<void>;
-  /**
-   * Allows you to provide a `fetcher` from Remix's `useFetcher` hook.
-   * The form will use the fetcher for loading states, action data, etc
-   * instead of the default form action.
-   */
-  fetcher?: FetcherWithComponents<any>;
-  /**
-   * Accepts an object of default values for the form
-   * that will automatically be propagated to the form fields via `useField`.
-   */
-  defaultValues?: Partial<DataForSubaction<DataType, Subaction>>;
-  /**
-   * A ref to the form element.
-   */
-  formRef?: React.RefObject<HTMLFormElement>;
-  /**
-   * An optional sub-action to use for the form.
-   * Setting a value here will cause the form to be submitted with an extra `subaction` value.
-   * This can be useful when there are multiple forms on the screen handled by the same action.
-   */
-  subaction?: Subaction;
-  /**
-   * Reset the form to the default values after the form has been successfully submitted.
-   * This is useful if you want to submit the same form multiple times,
-   * and don't redirect in-between submissions.
-   */
-  resetAfterSubmit?: boolean;
-  /**
-   * Normally, the first invalid input will be focused when the validation fails on form submit.
-   * Set this to `false` to disable this behavior.
-   */
-  disableFocusOnError?: boolean;
-} & Omit<ComponentProps<typeof RemixForm>, "onSubmit">;
-
-const getDataFromForm = (el: HTMLFormElement) => new FormData(el);
-
-function nonNull<T>(value: T | null | undefined): value is T {
-  return value !== null;
-}
-
-const focusFirstInvalidInput = (
-  fieldErrors: FieldErrors,
-  customFocusHandlers: MultiValueMap<string, () => void>,
-  formElement: HTMLFormElement
-) => {
-  const namesInOrder = [...formElement.elements]
-    .map((el) => {
-      const input = el instanceof RadioNodeList ? el[0] : el;
-      if (input instanceof HTMLElement && "name" in input)
-        return (input as any).name;
-      return null;
-    })
-    .filter(nonNull)
-    .filter((name) => name in fieldErrors);
-  const uniqueNamesInOrder = R.uniq(namesInOrder);
-
-  for (const fieldName of uniqueNamesInOrder) {
-    if (customFocusHandlers.has(fieldName)) {
-      customFocusHandlers.getAll(fieldName).forEach((handler) => {
-        handler();
-      });
-      break;
-    }
-
-    const elem = formElement.elements.namedItem(fieldName);
-    if (!elem) continue;
-
-    if (elem instanceof RadioNodeList) {
-      const selectedRadio =
-        [...elem]
-          .filter(
-            (item): item is HTMLInputElement => item instanceof HTMLInputElement
-          )
-          .find((item) => item.value === elem.value) ?? elem[0];
-      if (selectedRadio && selectedRadio instanceof HTMLInputElement) {
-        selectedRadio.focus();
-        break;
-      }
-    }
-
-    if (elem instanceof HTMLElement) {
-      if (elem instanceof HTMLInputElement && elem.type === "hidden") {
-        continue;
-      }
-
-      elem.focus();
-      break;
-    }
-  }
-};
-
-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;
-};
-
-function formEventProxy<T extends object>(event: T): T {
-  let defaultPrevented = false;
-  return new Proxy(event, {
-    get: (target, prop) => {
-      if (prop === "preventDefault") {
-        return () => {
-          defaultPrevented = true;
-        };
-      }
-
-      if (prop === "defaultPrevented") {
-        return defaultPrevented;
-      }
-
-      return target[prop as keyof T];
-    },
-  }) as T;
-}
-
-type HTMLSubmitEvent = React.BaseSyntheticEvent<
-  SubmitEvent,
-  Event,
-  HTMLFormElement
->;
-
-type HTMLFormSubmitter = HTMLButtonElement | HTMLInputElement;
-
-/**
- * The primary form component of `remix-validated-form`.
- */
-export function ValidatedForm<DataType, Subaction extends string | undefined>({
-  validator,
-  onSubmit,
-  children,
-  fetcher,
-  action,
-  defaultValues: unMemoizedDefaults,
-  formRef: formRefProp,
-  onReset,
-  subaction,
-  resetAfterSubmit = false,
-  disableFocusOnError,
-  method,
-  replace,
-  id,
-  preventScrollReset,
-  relative,
-  encType,
-  ...rest
-}: FormProps<DataType, Subaction>) {
-  const formId = useFormId(id);
-  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
-  const contextValue = useMemo<InternalFormContextValue>(
-    () => ({
-      formId,
-      action,
-      subaction,
-      defaultValuesProp: providedDefaultValues,
-      fetcher,
-    }),
-    [action, fetcher, formId, providedDefaultValues, subaction]
-  );
-  const backendError = useErrorResponseForForm(contextValue);
-  const backendDefaultValues = useDefaultValuesFromLoader(contextValue);
-  const hasActiveSubmission = useHasActiveFormSubmit(contextValue);
-  const formRef = useRef<HTMLFormElement>(null);
-  const Form = fetcher?.Form ?? RemixForm;
-
-  const submit = useSubmit();
-  const setFieldErrors = useSetFieldErrors(formId);
-  const setFieldError = useFormStore(formId, (state) => state.setFieldError);
-  const reset = useFormStore(formId, (state) => state.reset);
-  const startSubmit = useFormStore(formId, (state) => state.startSubmit);
-  const endSubmit = useFormStore(formId, (state) => state.endSubmit);
-  const syncFormProps = useFormStore(formId, (state) => state.syncFormProps);
-  const setFormElementInState = useFormStore(
-    formId,
-    (state) => state.setFormElement
-  );
-  const cleanupForm = useRootFormStore((state) => state.cleanupForm);
-  const registerForm = useRootFormStore((state) => state.registerForm);
-
-  const customFocusHandlers = useMultiValueMap<string, () => void>();
-  const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
-    useCallback(
-      (fieldName, handler) => {
-        customFocusHandlers().add(fieldName, handler);
-        return () => {
-          customFocusHandlers().remove(fieldName, handler);
-        };
-      },
-      [customFocusHandlers]
-    );
-
-  // TODO: all these hooks running at startup cause extra, unnecessary renders
-  // There must be a nice way to avoid this.
-  useLayoutEffect(() => {
-    registerForm(formId);
-    return () => cleanupForm(formId);
-  }, [cleanupForm, formId, registerForm]);
-
-  useLayoutEffect(() => {
-    syncFormProps({
-      action,
-      defaultValues: providedDefaultValues ?? backendDefaultValues ?? {},
-      subaction,
-      registerReceiveFocus,
-      validator,
-    });
-  }, [
-    action,
-    providedDefaultValues,
-    registerReceiveFocus,
-    subaction,
-    syncFormProps,
-    backendDefaultValues,
-    validator,
-  ]);
-
-  useLayoutEffect(() => {
-    setFormElementInState(formRef.current);
-  }, [setFormElementInState]);
-
-  useEffect(() => {
-    setFieldErrors(backendError?.fieldErrors ?? {});
-    if (!disableFocusOnError && backendError?.fieldErrors) {
-      focusFirstInvalidInput(
-        backendError.fieldErrors,
-        customFocusHandlers(),
-        formRef.current!
-      );
-    }
-  }, [
-    backendError?.fieldErrors,
-    customFocusHandlers,
-    disableFocusOnError,
-    setFieldErrors,
-    setFieldError,
-  ]);
-
-  useSubmitComplete(hasActiveSubmission, () => {
-    endSubmit();
-  });
-
-  const handleSubmit = async (
-    e: FormEvent<HTMLFormElement>,
-    target: typeof e.currentTarget,
-    nativeEvent: HTMLSubmitEvent["nativeEvent"]
-  ) => {
-    startSubmit();
-    const submitter = nativeEvent.submitter as HTMLFormSubmitter | null;
-    const formMethod = (submitter?.formMethod as FormMethod) || method;
-    const formData = getDataFromForm(target);
-    if (submitter?.name) {
-      formData.append(submitter.name, submitter.value);
-    }
-
-    const result = await validator.validate(formData);
-    if (result.error) {
-      setFieldErrors(result.error.fieldErrors);
-      endSubmit();
-      if (!disableFocusOnError) {
-        focusFirstInvalidInput(
-          result.error.fieldErrors,
-          customFocusHandlers(),
-          formRef.current!
-        );
-      }
-    } else {
-      setFieldErrors({});
-      const eventProxy = formEventProxy(e);
-      await onSubmit?.(result.data as any, eventProxy);
-      if (eventProxy.defaultPrevented) {
-        endSubmit();
-        return;
-      }
-
-      const opts: SubmitOptions = {
-        method: formMethod,
-        replace,
-        preventScrollReset,
-        relative,
-        action,
-        encType: encType as FormEncType | undefined,
-      };
-
-      // We deviate from the Remix code here a bit because of our async submit.
-      // In Remix's `FormImpl`, they use `event.currentTarget` to get the form,
-      // but we already have the form in `formRef.current` so we can just use that.
-      // If we use `event.currentTarget` here, it will break because `currentTarget`
-      // will have changed since the start of the submission.
-      if (fetcher) fetcher.submit(formData, opts);
-      else submit(formData, opts);
-    }
-  };
-
-  return (
-    <Form
-      ref={mergeRefs([formRef, formRefProp])}
-      {...rest}
-      id={id}
-      action={action}
-      method={method}
-      encType={encType}
-      replace={replace}
-      preventScrollReset={preventScrollReset}
-      relative={relative}
-      onSubmit={(e) => {
-        e.preventDefault();
-        handleSubmit(
-          e,
-          e.currentTarget,
-          (e as unknown as HTMLSubmitEvent).nativeEvent
-        );
-      }}
-      onReset={(event) => {
-        onReset?.(event);
-        if (event.defaultPrevented) return;
-        reset();
-      }}
-    >
-      <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}
-        </>
-      </InternalFormContext.Provider>
-    </Form>
-  );
-}

package/src/hooks.ts

@@ -1,160 +0,0 @@
-import { useEffect, useMemo } from "react";
-import {
-  createGetInputProps,
-  GetInputProps,
-  ValidationBehaviorOptions,
-} from "./internal/getInputProps";
-import {
-  useInternalFormContext,
-  useFieldTouched,
-  useFieldError,
-  useFieldDefaultValue,
-  useClearError,
-  useInternalIsSubmitting,
-  useInternalIsValid,
-  useInternalHasBeenSubmitted,
-  useRegisterReceiveFocus,
-  useSmartValidate,
-} from "./internal/hooks";
-import {
-  useControllableValue,
-  useUpdateControllableValue,
-} from "./internal/state/controlledFields";
-
-/**
- * Returns whether or not the parent form is currently being submitted.
- * This is different from Remix's `useNavigation()` 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 useInternalIsSubmitting(formContext.formId);
-};
-
-/**
- * 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 useInternalIsValid(formContext.formId);
-};
-
-export type FieldProps = {
-  /**
-   * The validation error message if there is one.
-   */
-  error?: string;
-  /**
-   * Clears the error message.
-   */
-  clearError: () => void;
-  /**
-   * Validates the field.
-   */
-  validate: () => void;
-  /**
-   * The default value of the field, if there is one.
-   */
-  defaultValue?: any;
-  /**
-   * Whether or not the field has been touched.
-   */
-  touched: boolean;
-  /**
-   * Helper to set the touched state of the field.
-   */
-  setTouched: (touched: boolean) => void;
-  /**
-   * Helper to get all the props necessary for a regular input.
-   */
-  getInputProps: GetInputProps;
-};
-
-/**
- * Provides the data and helpers necessary to set up a field.
- */
-export const useField = (
-  name: string,
-  options?: {
-    /**
-     * Allows you to configure a custom function that will be called
-     * when the input needs to receive focus due to a validation error.
-     * This is useful for custom components that use a hidden input.
-     */
-    handleReceiveFocus?: () => void;
-    /**
-     * 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 { formId: providedFormId, handleReceiveFocus } = options ?? {};
-  const formContext = useInternalFormContext(providedFormId, "useField");
-
-  const defaultValue = useFieldDefaultValue(name, formContext);
-  const [touched, setTouched] = useFieldTouched(name, formContext);
-  const error = useFieldError(name, formContext);
-  const clearError = useClearError(formContext);
-
-  const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
-  const smartValidate = useSmartValidate(formContext.formId);
-  const registerReceiveFocus = useRegisterReceiveFocus(formContext.formId);
-
-  useEffect(() => {
-    if (handleReceiveFocus)
-      return registerReceiveFocus(name, handleReceiveFocus);
-  }, [handleReceiveFocus, name, registerReceiveFocus]);
-
-  const field = useMemo<FieldProps>(() => {
-    const helpers = {
-      error,
-      clearError: () => clearError(name),
-      validate: () => smartValidate({ alwaysIncludeErrorsFromFields: [name] }),
-      defaultValue,
-      touched,
-      setTouched,
-    };
-    const getInputProps = createGetInputProps({
-      ...helpers,
-      name,
-      hasBeenSubmitted,
-      validationBehavior: options?.validationBehavior,
-    });
-    return {
-      ...helpers,
-      getInputProps,
-    };
-  }, [
-    error,
-    clearError,
-    defaultValue,
-    touched,
-    setTouched,
-    name,
-    hasBeenSubmitted,
-    options?.validationBehavior,
-    smartValidate,
-  ]);
-
-  return field;
-};
-
-export const useControlField = <T>(name: string, formId?: string) => {
-  const context = useInternalFormContext(formId, "useControlField");
-  const [value, setValue] = useControllableValue(context, name);
-  return [value as T, setValue as (value: T) => void] as const;
-};
-
-export const useUpdateControlledField = (formId?: string) => {
-  const context = useInternalFormContext(formId, "useControlField");
-  return useUpdateControllableValue(context.formId);
-};

package/src/index.ts

@@ -1,12 +0,0 @@
-export * from "./hooks";
-export * from "./server";
-export * from "./ValidatedForm";
-export * from "./validation/types";
-export * from "./validation/createValidator";
-export * from "./userFacingFormContext";
-export {
-  FieldArray,
-  useFieldArray,
-  type FieldArrayProps,
-  type FieldArrayHelpers,
-} from "./internal/state/fieldArray";

package/src/internal/MultiValueMap.ts

@@ -1,44 +0,0 @@
-import { useCallback, useRef } from "react";
-
-export class MultiValueMap<Key, Value> {
-  private dict: Map<Key, Value[]> = new Map();
-
-  add = (key: Key, value: Value) => {
-    if (this.dict.has(key)) {
-      this.dict.get(key)!.push(value);
-    } else {
-      this.dict.set(key, [value]);
-    }
-  };
-
-  delete = (key: Key) => {
-    this.dict.delete(key);
-  };
-
-  remove = (key: Key, value: Value) => {
-    if (!this.dict.has(key)) return;
-    const array = this.dict.get(key)!;
-    const index = array.indexOf(value);
-    if (index !== -1) array.splice(index, 1);
-    if (array.length === 0) this.dict.delete(key);
-  };
-
-  getAll = (key: Key): Value[] => {
-    return this.dict.get(key) ?? [];
-  };
-
-  entries = (): IterableIterator<[Key, Value[]]> => this.dict.entries();
-
-  values = (): IterableIterator<Value[]> => this.dict.values();
-
-  has = (key: Key): boolean => this.dict.has(key);
-}
-
-export const useMultiValueMap = <Key, Value>() => {
-  const ref = useRef<MultiValueMap<Key, Value> | null>(null);
-  return useCallback(() => {
-    if (ref.current) return ref.current;
-    ref.current = new MultiValueMap();
-    return ref.current;
-  }, []);
-};

package/src/internal/constants.ts

@@ -1,4 +0,0 @@
-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/flatten.ts

@@ -1,12 +0,0 @@
-import { setPath } from "set-get";
-import { MultiValueMap } from "./MultiValueMap";
-
-export const objectFromPathEntries = (entries: [string, any][]) => {
-  const map = new MultiValueMap<string, any>();
-  entries.forEach(([key, value]) => map.add(key, value));
-  return [...map.entries()].reduce(
-    (acc, [key, value]) =>
-      setPath(acc, key, value.length === 1 ? value[0] : value),
-    {} as Record<string, any>
-  );
-};

package/src/internal/formContext.ts

@@ -1,13 +0,0 @@
-import { FetcherWithComponents } from "@remix-run/react";
-import { createContext } from "react";
-
-export type InternalFormContextValue = {
-  formId: string | symbol;
-  action?: string;
-  subaction?: string;
-  defaultValuesProp?: { [fieldName: string]: any };
-  fetcher?: FetcherWithComponents<unknown>;
-};
-
-export const InternalFormContext =
-  createContext<InternalFormContextValue | null>(null);