remix-validated-form 4.3.1-beta.0 → 4.4.0

package/browser/internal/state/controlledFields.js

@@ -1,93 +1,50 @@
-import { atom } from "jotai";
-import { useAtomCallback } from "jotai/utils";
-import omit from "lodash/omit";
 import { useCallback, useEffect } from "react";
-import { useFieldDefaultValue, useFormAtomValue, useFormAtom, useFormUpdateAtom, } from "../hooks";
-import { isHydratedAtom } from "../state";
-import { fieldAtomFamily, formAtomFamily, } from "./atomUtils";
-export const controlledFieldsAtom = formAtomFamily({});
-const refCountAtom = fieldAtomFamily(() => atom(0));
-const fieldValueAtom = fieldAtomFamily(() => atom(undefined));
-const fieldValueHydratedAtom = fieldAtomFamily(() => atom(false));
-export const valueUpdatePromiseAtom = fieldAtomFamily(() => atom(undefined));
-export const resolveValueUpdateAtom = fieldAtomFamily(() => atom(undefined));
-const registerAtom = atom(null, (get, set, { formId, field }) => {
-    set(refCountAtom({ formId, field }), (prev) => prev + 1);
-    const newRefCount = get(refCountAtom({ formId, field }));
-    // We don't set hydrated here because it gets set when we know
-    // we have the right default values
-    if (newRefCount === 1) {
-        set(controlledFieldsAtom(formId), (prev) => ({
-            ...prev,
-            [field]: fieldValueAtom({ formId, field }),
-        }));
-    }
-});
-const unregisterAtom = atom(null, (get, set, { formId, field }) => {
-    set(refCountAtom({ formId, field }), (prev) => prev - 1);
-    const newRefCount = get(refCountAtom({ formId, field }));
-    if (newRefCount === 0) {
-        set(controlledFieldsAtom(formId), (prev) => omit(prev, field));
-        fieldValueAtom.remove({ formId, field });
-        resolveValueUpdateAtom.remove({ formId, field });
-        fieldValueHydratedAtom.remove({ formId, field });
-    }
-});
-export const setControlledFieldValueAtom = atom(null, (_get, set, { formId, field, value, }) => {
-    set(fieldValueAtom({ formId, field }), value);
-    const resolveAtom = resolveValueUpdateAtom({ formId, field });
-    const promiseAtom = valueUpdatePromiseAtom({ formId, field });
-    const promise = new Promise((resolve) => set(resolveAtom, () => {
-        resolve();
-        set(resolveAtom, undefined);
-        set(promiseAtom, undefined);
-    }));
-    set(promiseAtom, promise);
-});
+import { useFieldDefaultValue } from "../hooks";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
 export const useControlledFieldValue = (context, field) => {
-    const fieldAtom = fieldValueAtom({ formId: context.formId, field });
-    const [value, setValue] = useFormAtom(fieldAtom);
+    const useValueStore = controlledFieldStore(context.formId);
+    const value = useValueStore((state) => { var _a; return (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.value; });
+    const useFormStore = formStore(context.formId);
+    const isFormHydrated = useFormStore((state) => state.isHydrated);
     const defaultValue = useFieldDefaultValue(field, context);
-    const isHydrated = useFormAtomValue(isHydratedAtom(context.formId));
-    const [isFieldHydrated, setIsFieldHydrated] = useFormAtom(fieldValueHydratedAtom({ formId: context.formId, field }));
+    const isFieldHydrated = useValueStore((state) => { var _a, _b; return (_b = (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.hydrated) !== null && _b !== void 0 ? _b : false; });
+    const hydrateWithDefault = useValueStore((state) => state.hydrateWithDefault);
     useEffect(() => {
-        if (isHydrated && !isFieldHydrated) {
-            setValue(defaultValue);
-            setIsFieldHydrated(true);
+        if (isFormHydrated && !isFieldHydrated) {
+            hydrateWithDefault(field, defaultValue);
         }
     }, [
         defaultValue,
         field,
-        context.formId,
+        hydrateWithDefault,
         isFieldHydrated,
-        isHydrated,
-        setIsFieldHydrated,
-        setValue,
+        isFormHydrated,
     ]);
     return isFieldHydrated ? value : defaultValue;
 };
 export const useControllableValue = (context, field) => {
-    const resolveUpdate = useFormAtomValue(resolveValueUpdateAtom({ formId: context.formId, field }));
+    const useValueStore = controlledFieldStore(context.formId);
+    const resolveUpdate = useValueStore((state) => { var _a; return (_a = state.fields[field]) === null || _a === void 0 ? void 0 : _a.resolveValueUpdate; });
     useEffect(() => {
         resolveUpdate === null || resolveUpdate === void 0 ? void 0 : resolveUpdate();
     }, [resolveUpdate]);
-    const register = useFormUpdateAtom(registerAtom);
-    const unregister = useFormUpdateAtom(unregisterAtom);
+    const register = useValueStore((state) => state.register);
+    const unregister = useValueStore((state) => state.unregister);
     useEffect(() => {
-        register({ formId: context.formId, field });
-        return () => unregister({ formId: context.formId, field });
+        register(field);
+        return () => unregister(field);
     }, [context.formId, field, register, unregister]);
-    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
-    const setValue = useCallback((value) => setControlledFieldValue({ formId: context.formId, field, value }), [field, context.formId, setControlledFieldValue]);
+    const setControlledFieldValue = useValueStore((state) => state.setValue);
+    const setValue = useCallback((value) => setControlledFieldValue(field, value), [field, setControlledFieldValue]);
     const value = useControlledFieldValue(context, field);
     return [value, setValue];
 };
 export const useUpdateControllableValue = (formId) => {
-    const setControlledFieldValue = useFormUpdateAtom(setControlledFieldValueAtom);
-    return useCallback((field, value) => setControlledFieldValue({ formId, field, value }), [formId, setControlledFieldValue]);
+    const useValueStore = controlledFieldStore(formId);
+    return useValueStore((state) => state.setValue);
 };
 export const useAwaitValue = (formId) => {
-    return useAtomCallback(useCallback(async (get, _set, field) => {
-        await get(valueUpdatePromiseAtom({ formId, field }));
-    }, [formId]));
+    const useValueStore = controlledFieldStore(formId);
+    return useValueStore((state) => state.awaitValueUpdate);
 };

package/browser/internal/state/createFormStore.d.ts

@@ -0,0 +1,40 @@
+import { FieldErrors, TouchedFields, Validator } from "../../validation/types";
+export declare type SyncedFormProps = {
+    formId?: string;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    validator: Validator<unknown>;
+};
+export declare type FormState = {
+    isHydrated: boolean;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    fieldErrors: FieldErrors;
+    touchedFields: TouchedFields;
+    formProps?: SyncedFormProps;
+    formElement: HTMLFormElement | null;
+    isValid: () => boolean;
+    startSubmit: () => void;
+    endSubmit: () => void;
+    setTouched: (field: string, touched: boolean) => void;
+    setFieldError: (field: string, error: string) => void;
+    setFieldErrors: (errors: FieldErrors) => void;
+    clearFieldError: (field: string) => void;
+    reset: () => void;
+    syncFormProps: (props: SyncedFormProps) => void;
+    setHydrated: () => void;
+    setFormElement: (formElement: HTMLFormElement | null) => void;
+    validateField: (fieldName: string) => Promise<string | null>;
+    validate: () => Promise<void>;
+    resetFormElement: () => void;
+};
+export declare const formStore: {
+    (formId: import("./storeFamily").InternalFormId): import("zustand").UseBoundStore<Omit<import("zustand").StoreApi<FormState>, "setState"> & {
+        setState(nextStateOrUpdater: FormState | Partial<FormState> | ((state: import("immer/dist/internal").WritableDraft<FormState>) => void), shouldReplace?: boolean | undefined): void;
+    }>;
+    remove(formId: import("./storeFamily").InternalFormId): void;
+};

package/browser/internal/state/createFormStore.js

@@ -0,0 +1,83 @@
+import invariant from "tiny-invariant";
+import create from "zustand";
+import { immer } from "zustand/middleware/immer";
+import { controlledFieldStore } from "./controlledFieldStore";
+import { storeFamily } from "./storeFamily";
+export const formStore = storeFamily((formId) => create()(immer((set, get, api) => ({
+    isHydrated: false,
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    fieldErrors: {},
+    formElement: null,
+    isValid: () => Object.keys(get().fieldErrors).length === 0,
+    startSubmit: () => set((state) => {
+        state.isSubmitting = true;
+        state.hasBeenSubmitted = true;
+    }),
+    endSubmit: () => set((state) => {
+        state.isSubmitting = false;
+    }),
+    setTouched: (fieldName, touched) => set((state) => {
+        state.touchedFields[fieldName] = touched;
+    }),
+    setFieldError: (fieldName, error) => set((state) => {
+        state.fieldErrors[fieldName] = error;
+    }),
+    setFieldErrors: (errors) => set((state) => {
+        state.fieldErrors = errors;
+    }),
+    clearFieldError: (fieldName) => set((state) => {
+        delete state.fieldErrors[fieldName];
+    }),
+    reset: () => set((state) => {
+        state.fieldErrors = {};
+        state.touchedFields = {};
+        state.hasBeenSubmitted = false;
+    }),
+    syncFormProps: (props) => set((state) => {
+        state.formProps = props;
+    }),
+    setHydrated: () => set((state) => {
+        state.isHydrated = true;
+    }),
+    setFormElement: (formElement) => {
+        // This gets called frequently, so we want to avoid calling set() every time
+        // Or else we wind up with an infinite loop
+        if (get().formElement === formElement)
+            return;
+        set((state) => {
+            // weird type issue here
+            // seems to be because formElement is a writable draft
+            state.formElement = formElement;
+        });
+    },
+    validateField: async (field) => {
+        var _a, _b, _c;
+        const formElement = get().formElement;
+        invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
+        const validator = (_a = get().formProps) === null || _a === void 0 ? void 0 : _a.validator;
+        invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
+        await ((_c = (_b = controlledFieldStore(formId).getState()).awaitValueUpdate) === null || _c === void 0 ? void 0 : _c.call(_b, field));
+        const { error } = await validator.validateField(new FormData(formElement), field);
+        if (error) {
+            get().setFieldError(field, error);
+            return error;
+        }
+        else {
+            get().clearFieldError(field);
+            return null;
+        }
+    },
+    validate: async () => {
+        var _a;
+        const formElement = get().formElement;
+        invariant(formElement, "Cannot find reference to form. This is probably a bug in remix-validated-form.");
+        const validator = (_a = get().formProps) === null || _a === void 0 ? void 0 : _a.validator;
+        invariant(validator, "Cannot validator. This is probably a bug in remix-validated-form.");
+        const { error } = await validator.validate(new FormData(formElement));
+        if (error)
+            get().setFieldErrors(error.fieldErrors);
+    },
+    resetFormElement: () => { var _a; return (_a = get().formElement) === null || _a === void 0 ? void 0 : _a.reset(); },
+}))));

package/browser/internal/state/storeFamily.d.ts

@@ -0,0 +1,9 @@
+/**
+ * This is basically what `atomFamily` from jotai does,
+ * but it doesn't make sense to include the entire jotai library just for that api.
+ */
+export declare type InternalFormId = string | symbol;
+export declare const storeFamily: <T>(create: (formId: InternalFormId) => T) => {
+    (formId: InternalFormId): T;
+    remove(formId: InternalFormId): void;
+};

package/browser/internal/state/storeFamily.js

@@ -0,0 +1,18 @@
+/**
+ * This is basically what `atomFamily` from jotai does,
+ * but it doesn't make sense to include the entire jotai library just for that api.
+ */
+export const storeFamily = (create) => {
+    const stores = new Map();
+    const family = (formId) => {
+        if (stores.has(formId))
+            return stores.get(formId);
+        const store = create(formId);
+        stores.set(formId, store);
+        return store;
+    };
+    family.remove = (formId) => {
+        stores.delete(formId);
+    };
+    return family;
+};

package/browser/internal/state/storeHooks.d.ts

@@ -0,0 +1,5 @@
+import { ControlledFieldState } from "./controlledFieldStore";
+import { FormState } from "./createFormStore";
+import { InternalFormId } from "./storeFamily";
+export declare const useFormStore: <T>(formId: InternalFormId, selector: (state: FormState) => T) => T;
+export declare const useControlledFieldStore: <T>(formId: InternalFormId, selector: (state: ControlledFieldState) => T) => T;

package/browser/internal/state/storeHooks.js

@@ -0,0 +1,10 @@
+import { controlledFieldStore, } from "./controlledFieldStore";
+import { formStore } from "./createFormStore";
+export const useFormStore = (formId, selector) => {
+    const useStore = formStore(formId);
+    return useStore(selector);
+};
+export const useControlledFieldStore = (formId, selector) => {
+    const useStore = controlledFieldStore(formId);
+    return useStore(selector);
+};

package/browser/unreleased/formStateHooks.d.ts

@@ -30,6 +30,21 @@ export declare type FormHelpers = {
      * Change the touched state of the specified field.
      */
     setTouched: (fieldName: string, touched: boolean) => void;
+    /**
+     * Validate the whole form and populate any errors.
+     */
+    validate: () => Promise<void>;
+    /**
+     * Clears all errors on the form.
+     */
+    clearAllErrors: () => void;
+    /**
+     * Resets the form.
+     *
+     * _Note_: The equivalent behavior can be achieved by calling formElement.reset()
+     * or clicking a button element with `type="reset"`.
+     */
+    reset: () => void;
 };
 /**
  * Returns helpers that can be used to update the form state.

package/browser/unreleased/formStateHooks.js

@@ -1,25 +1,27 @@
 import { useMemo } from "react";
-import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useFormAtomValue, } from "../internal/hooks";
-import { fieldErrorsAtom, formPropsAtom, hasBeenSubmittedAtom, isSubmittingAtom, isValidAtom, touchedFieldsAtom, } from "../internal/state";
+import { useInternalFormContext, useClearError, useSetTouched, useDefaultValuesForForm, useFieldErrorsForForm, useInternalIsSubmitting, useInternalHasBeenSubmitted, useTouchedFields, useInternalIsValid, useFieldErrors, useValidateField, useValidate, useSetFieldErrors, useResetFormElement, useSyncedDefaultValues, useFormActionProp, useFormSubactionProp, } from "../internal/hooks";
 /**
  * Returns information about the form.
  *
  * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
  */
 export const useFormState = (formId) => {
-    const formContext = useInternalFormContext(formId, "useIsValid");
-    const formProps = useFormAtomValue(formPropsAtom(formContext.formId));
-    const isSubmitting = useFormAtomValue(isSubmittingAtom(formContext.formId));
-    const hasBeenSubmitted = useFormAtomValue(hasBeenSubmittedAtom(formContext.formId));
-    const touchedFields = useFormAtomValue(touchedFieldsAtom(formContext.formId));
-    const isValid = useFormAtomValue(isValidAtom(formContext.formId));
+    const formContext = useInternalFormContext(formId, "useFormState");
+    const isSubmitting = useInternalIsSubmitting(formContext.formId);
+    const hasBeenSubmitted = useInternalHasBeenSubmitted(formContext.formId);
+    const touchedFields = useTouchedFields(formContext.formId);
+    const isValid = useInternalIsValid(formContext.formId);
+    const action = useFormActionProp(formContext.formId);
+    const subaction = useFormSubactionProp(formContext.formId);
+    const syncedDefaultValues = useSyncedDefaultValues(formContext.formId);
     const defaultValuesToUse = useDefaultValuesForForm(formContext);
-    const hydratedDefaultValues = defaultValuesToUse.hydrateTo(formProps.defaultValues);
-    const fieldErrorsFromState = useFormAtomValue(fieldErrorsAtom(formContext.formId));
+    const hydratedDefaultValues = defaultValuesToUse.hydrateTo(syncedDefaultValues);
+    const fieldErrorsFromState = useFieldErrors(formContext.formId);
     const fieldErrorsToUse = useFieldErrorsForForm(formContext);
     const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
     return useMemo(() => ({
-        ...formProps,
+        action,
+        subaction,
         defaultValues: hydratedDefaultValues,
         fieldErrors: hydratedFieldErrors !== null && hydratedFieldErrors !== void 0 ? hydratedFieldErrors : {},
         hasBeenSubmitted,
@@ -27,12 +29,13 @@ export const useFormState = (formId) => {
         touchedFields,
         isValid,
     }), [
-        formProps,
+        action,
         hasBeenSubmitted,
         hydratedDefaultValues,
         hydratedFieldErrors,
         isSubmitting,
         isValid,
+        subaction,
         touchedFields,
     ]);
 };
@@ -44,11 +47,17 @@ export const useFormState = (formId) => {
 export const useFormHelpers = (formId) => {
     const formContext = useInternalFormContext(formId, "useFormHelpers");
     const setTouched = useSetTouched(formContext);
-    const { validateField } = useFormAtomValue(formPropsAtom(formContext.formId));
+    const validateField = useValidateField(formContext.formId);
+    const validate = useValidate(formContext.formId);
     const clearError = useClearError(formContext);
+    const setFieldErrors = useSetFieldErrors(formContext.formId);
+    const reset = useResetFormElement(formContext.formId);
     return useMemo(() => ({
         setTouched,
         validateField,
         clearError,
-    }), [clearError, setTouched, validateField]);
+        validate,
+        clearAllErrors: () => setFieldErrors({}),
+        reset,
+    }), [clearError, reset, setFieldErrors, setTouched, validate, validateField]);
 };

package/browser/userFacingFormContext.d.ts

@@ -53,6 +53,14 @@ export declare type FormContextValue = {
      * Change the touched state of the specified field.
      */
     setFieldTouched: (fieldName: string, touched: boolean) => void;
+    /**
+     * Validate the whole form and populate any errors.
+     */
+    validate: () => Promise<void>;
+    /**
+     * Clears all errors on the form.
+     */
+    clearAllErrors: () => void;
 };
 /**
  * Provides access to some of the internal state of the form.

package/browser/userFacingFormContext.js

@@ -1,6 +1,5 @@
 import { useCallback } from "react";
-import { useFormAtomValue, useInternalFormContext } from "./internal/hooks";
-import { formPropsAtom } from "./internal/state";
+import { useInternalFormContext, useRegisterReceiveFocus, } from "./internal/hooks";
 import { useFormHelpers, useFormState } from "./unreleased/formStateHooks";
 /**
  * Provides access to some of the internal state of the form.
@@ -9,8 +8,8 @@ export const useFormContext = (formId) => {
     // Try to access context so we get our error specific to this hook if it's not there
     const context = useInternalFormContext(formId, "useFormContext");
     const state = useFormState(formId);
-    const { clearError: internalClearError, setTouched, validateField, } = useFormHelpers(formId);
-    const { registerReceiveFocus } = useFormAtomValue(formPropsAtom(context.formId));
+    const { clearError: internalClearError, setTouched, validateField, clearAllErrors, validate, } = useFormHelpers(formId);
+    const registerReceiveFocus = useRegisterReceiveFocus(context.formId);
     const clearError = useCallback((...names) => {
         names.forEach((name) => {
             internalClearError(name);
@@ -22,5 +21,7 @@ export const useFormContext = (formId) => {
         validateField,
         clearError,
         registerReceiveFocus,
+        clearAllErrors,
+        validate,
     };
 };