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

package/build/internal/state.js

@@ -3,90 +3,74 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.syncFormContextAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.resetAtom = exports.setTouchedAtom = exports.setFieldErrorsAtom = exports.addErrorAtom = exports.clearErrorAtom = exports.isHydratedAtom = exports.isValidAtom = exports.defaultValuesAtom = exports.isSubmittingAtom = exports.registerReceiveFocusAtom = exports.validateFieldAtom = exports.hasBeenSubmittedAtom = exports.actionAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.formSelectorAtom = exports.fieldDefaultValueAtom = exports.fieldTouchedAtom = exports.fieldErrorAtom = exports.formRegistry = exports.ATOM_SCOPE = void 0;
+exports.fieldDefaultValueAtom = exports.fieldErrorAtom = exports.fieldTouchedAtom = exports.setFieldErrorAtom = exports.setTouchedAtom = exports.endSubmitAtom = exports.startSubmitAtom = exports.resetAtom = exports.isValidAtom = exports.cleanupFormState = exports.formElementAtom = exports.formPropsAtom = exports.touchedFieldsAtom = exports.fieldErrorsAtom = exports.hasBeenSubmittedAtom = exports.isSubmittingAtom = exports.isHydratedAtom = exports.ATOM_SCOPE = void 0;
 const jotai_1 = require("jotai");
-const immer_1 = require("jotai/immer");
 const utils_1 = require("jotai/utils");
-const get_1 = __importDefault(require("lodash/get"));
+const omit_1 = __importDefault(require("lodash/omit"));
+const atomUtils_1 = require("./state/atomUtils");
 exports.ATOM_SCOPE = Symbol("remix-validated-form-scope");
-exports.formRegistry = (0, utils_1.atomFamily)((formId) => (0, immer_1.atomWithImmer)({
-    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
+exports.isHydratedAtom = (0, atomUtils_1.formAtomFamily)(false);
+exports.isSubmittingAtom = (0, atomUtils_1.formAtomFamily)(false);
+exports.hasBeenSubmittedAtom = (0, atomUtils_1.formAtomFamily)(false);
+exports.fieldErrorsAtom = (0, atomUtils_1.formAtomFamily)({});
+exports.touchedFieldsAtom = (0, atomUtils_1.formAtomFamily)({});
+exports.formPropsAtom = (0, atomUtils_1.formAtomFamily)({
     validateField: () => Promise.resolve(null),
     registerReceiveFocus: () => () => { },
+    defaultValues: {},
+});
+exports.formElementAtom = (0, atomUtils_1.formAtomFamily)(null);
+//// Everything below is derived from the above
+const cleanupFormState = (formId) => {
+    [
+        exports.isHydratedAtom,
+        exports.isSubmittingAtom,
+        exports.hasBeenSubmittedAtom,
+        exports.fieldErrorsAtom,
+        exports.touchedFieldsAtom,
+        exports.formPropsAtom,
+    ].forEach((formAtom) => formAtom.remove(formId));
+};
+exports.cleanupFormState = cleanupFormState;
+exports.isValidAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)((get) => Object.keys(get((0, exports.fieldErrorsAtom)(formId))).length === 0));
+exports.resetAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
+    set((0, exports.fieldErrorsAtom)(formId), {});
+    set((0, exports.touchedFieldsAtom)(formId), {});
+    set((0, exports.hasBeenSubmittedAtom)(formId), false);
 }));
-const fieldErrorAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => { var _a; return (_a = formState.fieldErrors) === null || _a === void 0 ? void 0 : _a[name]; });
-exports.fieldErrorAtom = fieldErrorAtom;
-const fieldTouchedAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => formState.touchedFields[name]);
-exports.fieldTouchedAtom = fieldTouchedAtom;
-const fieldDefaultValueAtom = (name) => (formAtom) => (0, utils_1.selectAtom)(formAtom, (formState) => formState.defaultValues && (0, get_1.default)(formState.defaultValues, name));
-exports.fieldDefaultValueAtom = fieldDefaultValueAtom;
-// Selector atoms
-const formSelectorAtom = (selector) => (formAtom) => (0, utils_1.selectAtom)(formAtom, selector);
-exports.formSelectorAtom = formSelectorAtom;
-exports.fieldErrorsAtom = (0, exports.formSelectorAtom)((state) => state.fieldErrors);
-exports.touchedFieldsAtom = (0, exports.formSelectorAtom)((state) => state.touchedFields);
-exports.actionAtom = (0, exports.formSelectorAtom)((state) => state.action);
-exports.hasBeenSubmittedAtom = (0, exports.formSelectorAtom)((state) => state.hasBeenSubmitted);
-exports.validateFieldAtom = (0, exports.formSelectorAtom)((state) => state.validateField);
-exports.registerReceiveFocusAtom = (0, exports.formSelectorAtom)((state) => state.registerReceiveFocus);
-exports.isSubmittingAtom = (0, exports.formSelectorAtom)((state) => state.isSubmitting);
-exports.defaultValuesAtom = (0, exports.formSelectorAtom)((state) => state.defaultValues);
-exports.isValidAtom = (0, exports.formSelectorAtom)((state) => { var _a; return Object.keys((_a = state.fieldErrors) !== null && _a !== void 0 ? _a : {}).length === 0; });
-exports.isHydratedAtom = (0, exports.formSelectorAtom)((state) => state.hydrated);
-exports.clearErrorAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom }) => set(formAtom, (state) => {
-    var _a;
-    (_a = state.fieldErrors) === null || _a === void 0 ? true : delete _a[name];
-    return state;
+exports.startSubmitAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
+    set((0, exports.isSubmittingAtom)(formId), true);
+    set((0, exports.hasBeenSubmittedAtom)(formId), true);
 }));
-exports.addErrorAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom, error }) => set(formAtom, (state) => {
-    if (!state.fieldErrors)
-        state.fieldErrors = {};
-    state.fieldErrors[name] = error;
-    return state;
+exports.endSubmitAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (_get, set) => {
+    set((0, exports.isSubmittingAtom)(formId), false);
 }));
-exports.setFieldErrorsAtom = (0, jotai_1.atom)(null, (get, set, { formAtom, fieldErrors }) => set(formAtom, (state) => {
-    state.fieldErrors = fieldErrors;
-    return state;
+exports.setTouchedAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (get, set, { field, touched }) => {
+    const prev = get((0, exports.touchedFieldsAtom)(formId));
+    if (prev[field] !== touched) {
+        set((0, exports.touchedFieldsAtom)(formId), {
+            ...prev,
+            [field]: touched,
+        });
+    }
 }));
-exports.setTouchedAtom = (0, jotai_1.atom)(null, (get, set, { name, formAtom, touched }) => set(formAtom, (state) => {
-    state.touchedFields[name] = touched;
-    return state;
+exports.setFieldErrorAtom = (0, utils_1.atomFamily)((formId) => (0, jotai_1.atom)(null, (get, set, { field, error }) => {
+    const prev = get((0, exports.fieldErrorsAtom)(formId));
+    if (error === undefined && field in prev) {
+        set((0, exports.fieldErrorsAtom)(formId), (0, omit_1.default)(prev, field));
+    }
+    if (error !== undefined && prev[field] !== error) {
+        set((0, exports.fieldErrorsAtom)(formId), {
+            ...get((0, exports.fieldErrorsAtom)(formId)),
+            [field]: error,
+        });
+    }
 }));
-exports.resetAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
-    set(formAtom, (state) => {
-        state.fieldErrors = {};
-        state.touchedFields = {};
-        state.hasBeenSubmitted = false;
-        return state;
-    });
-});
-exports.startSubmitAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
-    set(formAtom, (state) => {
-        state.hasBeenSubmitted = true;
-        state.isSubmitting = true;
-        return state;
-    });
-});
-exports.endSubmitAtom = (0, jotai_1.atom)(null, (get, set, { formAtom }) => {
-    set(formAtom, (state) => {
-        state.isSubmitting = false;
-        return state;
-    });
-});
-exports.syncFormContextAtom = (0, jotai_1.atom)(null, (get, set, { defaultValues, action, subaction, formAtom, validateField, registerReceiveFocus, }) => {
-    set(formAtom, (state) => {
-        state.defaultValues = defaultValues;
-        state.action = action;
-        state.subaction = subaction;
-        state.registerReceiveFocus = registerReceiveFocus;
-        state.validateField = validateField;
-        state.hydrated = true;
-        return state;
-    });
-});
+//// Field specific
+exports.fieldTouchedAtom = (0, atomUtils_1.fieldAtomFamily)(({ formId, field }) => (0, jotai_1.atom)((get) => get((0, exports.touchedFieldsAtom)(formId))[field], (_get, set, touched) => {
+    set((0, exports.setTouchedAtom)(formId), { field, touched });
+}));
+exports.fieldErrorAtom = (0, atomUtils_1.fieldAtomFamily)(({ formId, field }) => (0, jotai_1.atom)((get) => get((0, exports.fieldErrorsAtom)(formId))[field], (_get, set, error) => {
+    set((0, exports.setFieldErrorAtom)(formId), { field, error });
+}));
+exports.fieldDefaultValueAtom = (0, atomUtils_1.fieldAtomFamily)(({ formId, field }) => (0, utils_1.selectAtom)((0, exports.formPropsAtom)(formId), (state) => state.defaultValues[field]));

package/build/internal/watch.d.ts

@@ -0,0 +1,20 @@
+declare type ParseInfo = {
+    value: unknown;
+    type: string;
+    isRepeated: boolean;
+    checked?: boolean;
+};
+declare type BaseWatchOptions<T> = {
+    formId?: string;
+    parse?: (info: ParseInfo) => T;
+};
+declare type UseWatchType = {
+    <T>(name: string, options?: BaseWatchOptions<T> & {
+        repeatable?: false;
+    }): T;
+    <T>(name: string, options?: BaseWatchOptions<T> & {
+        repeatable: true;
+    }): T[];
+};
+export declare const useWatch: UseWatchType;
+export {};

package/build/internal/watch.js

@@ -0,0 +1,126 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWatch = void 0;
+const jotai_1 = require("jotai");
+const utils_1 = require("jotai/utils");
+const isNaN_1 = __importDefault(require("lodash/isNaN"));
+const react_1 = require("react");
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const hooks_1 = require("./hooks");
+const elementUtils_1 = require("./logic/elementUtils");
+const state_1 = require("./state");
+const atomUtils_1 = require("./state/atomUtils");
+const controlledFields_1 = require("./state/controlledFields");
+const emptyAtom = (0, jotai_1.atom)(undefined); // Always empty -- just used as a default value
+const watchControlledFieldAtom = (0, atomUtils_1.fieldAtomFamily)(({ field, formId }) => (0, utils_1.selectAtom)((0, controlledFields_1.controlledFieldsAtom)(formId), (fields) => {
+    var _a;
+    return ({
+        present: field in fields,
+        valueAtom: (_a = fields[field]) !== null && _a !== void 0 ? _a : emptyAtom,
+    });
+}));
+const defaultParse = ({ value, type, isRepeated, checked, }) => {
+    if (type === "number") {
+        const result = Number(value);
+        if ((0, isNaN_1.default)(result))
+            throw new Error("Value is not a number");
+        return result;
+    }
+    if (type === "checkbox" && !isRepeated) {
+        return checked;
+    }
+    return value;
+};
+const getInputValues = (node, multipleInputs = false) => {
+    if (!node)
+        return [];
+    if (node instanceof RadioNodeList) {
+        return [...node].flatMap((el) => getInputValues(el, true));
+    }
+    if ((0, elementUtils_1.isMultiselect)(node)) {
+        return [
+            {
+                type: "select",
+                value: [...node.options]
+                    .filter((opt) => opt.selected)
+                    .map((opt) => opt.value),
+            },
+        ];
+    }
+    if ((0, elementUtils_1.isCheckbox)(node)) {
+        if (node.checked || !multipleInputs)
+            return [{ type: "checkbox", value: node.value, checked: node.checked }];
+        return [];
+    }
+    if ((0, elementUtils_1.isRadio)(node)) {
+        if (node.checked)
+            return [{ type: "radio", value: node.value, checked: node.checked }];
+        return [];
+    }
+    const input = node;
+    return [{ type: input.type, value: input.value, checked: input.checked }];
+};
+const useWatch = (field, { formId, parse = defaultParse, repeatable = false, } = {}) => {
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useWatch");
+    const defaultValue = (0, hooks_1.useFieldDefaultValue)(field, context);
+    const hasSynced = (0, react_1.useRef)(false);
+    const [inputValues, setValue] = (0, react_1.useState)([]);
+    const formElement = (0, hooks_1.useFormAtomValue)((0, state_1.formElementAtom)(context.formId));
+    const controlledField = (0, hooks_1.useFormAtomValue)(watchControlledFieldAtom({ formId: context.formId, field }));
+    const controlledValue = (0, hooks_1.useFormAtomValue)(controlledField.valueAtom);
+    const shouldSyncNativeInputValue = !controlledField.present && formElement;
+    const syncFieldValue = (0, react_1.useCallback)(() => {
+        (0, tiny_invariant_1.default)(formElement, `Unable to find form element for form. Watching field ${field}`);
+        hasSynced.current = true;
+        // We pull the values out using `form.elements` instead of `FormData`
+        // so that we can access the `type` of the input.
+        setValue(getInputValues(formElement.elements.namedItem(field)));
+    }, [field, formElement]);
+    // Should set the field values after the initial render
+    (0, react_1.useEffect)(() => {
+        if (shouldSyncNativeInputValue)
+            syncFieldValue();
+    }, [
+        controlledField.present,
+        formElement,
+        shouldSyncNativeInputValue,
+        syncFieldValue,
+    ]);
+    (0, react_1.useEffect)(() => {
+        if (shouldSyncNativeInputValue) {
+            const listener = async (event) => {
+                if (!(event.target instanceof HTMLElement))
+                    return;
+                const target = event.target;
+                const { form: targetForm, name: targetName } = target;
+                if (targetForm === formElement && targetName === field) {
+                    syncFieldValue();
+                }
+            };
+            window.addEventListener("change", listener);
+            window.addEventListener("input", listener);
+            return () => {
+                window.removeEventListener("change", listener);
+                window.removeEventListener("input", listener);
+            };
+        }
+    }, [field, formElement, shouldSyncNativeInputValue, syncFieldValue]);
+    const parsedValue = (0, react_1.useMemo)(() => {
+        const parsed = inputValues.map(({ type, value, checked }) => parse({
+            value,
+            type,
+            isRepeated: inputValues.length > 1 || repeatable,
+            checked,
+        }));
+        return parsed.length > 1 || repeatable ? parsed : parsed[0];
+    }, [parse, repeatable, inputValues]);
+    if (controlledField.present)
+        return controlledValue;
+    if (!hasSynced.current)
+        return defaultValue !== null && defaultValue !== void 0 ? defaultValue : (repeatable ? [] : undefined);
+    return parsedValue;
+};
+exports.useWatch = useWatch;

package/build/unreleased/formStateHooks.d.ts

@@ -0,0 +1,39 @@
+import { FieldErrors, TouchedFields } from "../validation/types";
+export declare type FormState = {
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    isValid: boolean;
+};
+/**
+ * Returns information about the form.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export declare const useFormState: (formId?: string | undefined) => FormState;
+export declare type FormHelpers = {
+    /**
+     * Clear the error of the specified field.
+     */
+    clearError: (fieldName: string) => void;
+    /**
+     * Validate the specified field.
+     */
+    validateField: (fieldName: string) => Promise<string | null>;
+    /**
+     * Change the touched state of the specified field.
+     */
+    setTouched: (fieldName: string, touched: boolean) => void;
+};
+/**
+ * Returns helpers that can be used to update the form state.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+export declare const useFormHelpers: (formId?: string | undefined) => FormHelpers;

package/build/unreleased/formStateHooks.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useFormHelpers = exports.useFormState = void 0;
+const react_1 = require("react");
+const hooks_1 = require("../internal/hooks");
+const state_1 = require("../internal/state");
+/**
+ * Returns information about the form.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+const useFormState = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useIsValid");
+    const formProps = (0, hooks_1.useFormAtomValue)((0, state_1.formPropsAtom)(formContext.formId));
+    const isSubmitting = (0, hooks_1.useFormAtomValue)((0, state_1.isSubmittingAtom)(formContext.formId));
+    const hasBeenSubmitted = (0, hooks_1.useFormAtomValue)((0, state_1.hasBeenSubmittedAtom)(formContext.formId));
+    const touchedFields = (0, hooks_1.useFormAtomValue)((0, state_1.touchedFieldsAtom)(formContext.formId));
+    const isValid = (0, hooks_1.useFormAtomValue)((0, state_1.isValidAtom)(formContext.formId));
+    const defaultValuesToUse = (0, hooks_1.useDefaultValuesForForm)(formContext);
+    const hydratedDefaultValues = defaultValuesToUse.hydrateTo(formProps.defaultValues);
+    const fieldErrorsFromState = (0, hooks_1.useFormAtomValue)((0, state_1.fieldErrorsAtom)(formContext.formId));
+    const fieldErrorsToUse = (0, hooks_1.useFieldErrorsForForm)(formContext);
+    const hydratedFieldErrors = fieldErrorsToUse.hydrateTo(fieldErrorsFromState);
+    return (0, react_1.useMemo)(() => ({
+        ...formProps,
+        defaultValues: hydratedDefaultValues,
+        fieldErrors: hydratedFieldErrors !== null && hydratedFieldErrors !== void 0 ? hydratedFieldErrors : {},
+        hasBeenSubmitted,
+        isSubmitting,
+        touchedFields,
+        isValid,
+    }), [
+        formProps,
+        hasBeenSubmitted,
+        hydratedDefaultValues,
+        hydratedFieldErrors,
+        isSubmitting,
+        isValid,
+        touchedFields,
+    ]);
+};
+exports.useFormState = useFormState;
+/**
+ * Returns helpers that can be used to update the form state.
+ *
+ * @param formId the id of the form. Only necessary if being used outside a ValidatedForm.
+ */
+const useFormHelpers = (formId) => {
+    const formContext = (0, hooks_1.useInternalFormContext)(formId, "useFormHelpers");
+    const setTouched = (0, hooks_1.useSetTouched)(formContext);
+    const { validateField } = (0, hooks_1.useFormAtomValue)((0, state_1.formPropsAtom)(formContext.formId));
+    const clearError = (0, hooks_1.useClearError)(formContext);
+    return (0, react_1.useMemo)(() => ({
+        setTouched,
+        validateField,
+        clearError,
+    }), [clearError, setTouched, validateField]);
+};
+exports.useFormHelpers = useFormHelpers;

package/build/userFacingFormContext.js

@@ -2,42 +2,28 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormContext = void 0;
 const react_1 = require("react");
-const hooks_1 = require("./hooks");
-const hooks_2 = require("./internal/hooks");
+const hooks_1 = require("./internal/hooks");
 const state_1 = require("./internal/state");
+const formStateHooks_1 = require("./unreleased/formStateHooks");
 /**
  * Provides access to some of the internal state of the form.
  */
 const useFormContext = (formId) => {
     // Try to access context so we get our error specific to this hook if it's not there
-    const context = (0, hooks_2.useInternalFormContext)(formId, "useFormContext");
-    const action = (0, hooks_2.useContextSelectAtom)(context.formId, state_1.actionAtom);
-    const isSubmitting = (0, hooks_1.useIsSubmitting)(formId);
-    const hasBeenSubmitted = (0, hooks_2.useContextSelectAtom)(context.formId, state_1.hasBeenSubmittedAtom);
-    const isValid = (0, hooks_1.useIsValid)(formId);
-    const defaultValues = (0, hooks_2.useHydratableSelector)(context, state_1.defaultValuesAtom, (0, hooks_2.useDefaultValuesForForm)(context));
-    const fieldErrors = (0, hooks_2.useHydratableSelector)(context, state_1.fieldErrorsAtom, (0, hooks_2.useFieldErrorsForForm)(context));
-    const setFieldTouched = (0, hooks_2.useSetTouched)(context);
-    const touchedFields = (0, hooks_2.useContextSelectAtom)(context.formId, state_1.touchedFieldsAtom);
-    const validateField = (0, hooks_2.useContextSelectAtom)(context.formId, state_1.validateFieldAtom);
-    const registerReceiveFocus = (0, hooks_2.useContextSelectAtom)(context.formId, state_1.registerReceiveFocusAtom);
-    const internalClearError = (0, hooks_2.useClearError)(context);
+    const context = (0, hooks_1.useInternalFormContext)(formId, "useFormContext");
+    const state = (0, formStateHooks_1.useFormState)(formId);
+    const { clearError: internalClearError, setTouched, validateField, } = (0, formStateHooks_1.useFormHelpers)(formId);
+    const { registerReceiveFocus } = (0, hooks_1.useFormAtomValue)((0, state_1.formPropsAtom)(context.formId));
     const clearError = (0, react_1.useCallback)((...names) => {
         names.forEach((name) => {
             internalClearError(name);
         });
     }, [internalClearError]);
     return {
-        isSubmitting,
-        hasBeenSubmitted,
-        isValid,
-        defaultValues,
-        clearError,
-        fieldErrors: fieldErrors !== null && fieldErrors !== void 0 ? fieldErrors : {},
-        action,
-        setFieldTouched,
-        touchedFields,
+        ...state,
+        setFieldTouched: setTouched,
         validateField,
+        clearError,
         registerReceiveFocus,
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.4-beta.0",
+  "version": "4.1.6",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",
@@ -48,7 +48,6 @@
     "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

@@ -25,15 +25,16 @@ import {
 } from "./internal/hooks";
 import { MultiValueMap, useMultiValueMap } from "./internal/MultiValueMap";
 import {
-  addErrorAtom,
-  clearErrorAtom,
+  cleanupFormState,
   endSubmitAtom,
-  formRegistry,
-  FormState,
+  fieldErrorsAtom,
+  formElementAtom,
+  formPropsAtom,
+  isHydratedAtom,
   resetAtom,
-  setFieldErrorsAtom,
+  setFieldErrorAtom,
   startSubmitAtom,
-  syncFormContextAtom,
+  SyncedFormProps,
 } from "./internal/state";
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
@@ -192,12 +193,6 @@ function formEventProxy<T extends object>(event: T): T {
   }) as T;
 }
 
-const useFormAtom = (formId: string | symbol) => {
-  const formAtom = formRegistry(formId);
-  useEffect(() => () => formRegistry.remove(formId), [formId]);
-  return formAtom;
-};
-
 /**
  * The primary form component of `remix-validated-form`.
  */
@@ -219,7 +214,6 @@ export function ValidatedForm<DataType>({
   ...rest
 }: FormProps<DataType>) {
   const formId = useFormId(id);
-  const formAtom = useFormAtom(formId);
   const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
@@ -238,73 +232,75 @@ export function ValidatedForm<DataType>({
   const Form = fetcher?.Form ?? RemixForm;
 
   const submit = useSubmit();
-  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 setFieldErrors = useFormUpdateAtom(fieldErrorsAtom(formId));
+  const setFieldError = useFormUpdateAtom(setFieldErrorAtom(formId));
+  const reset = useFormUpdateAtom(resetAtom(formId));
+  const startSubmit = useFormUpdateAtom(startSubmitAtom(formId));
+  const endSubmit = useFormUpdateAtom(endSubmitAtom(formId));
+  const syncFormProps = useFormUpdateAtom(formPropsAtom(formId));
+  const setHydrated = useFormUpdateAtom(isHydratedAtom(formId));
+  const setFormElementInState = useFormUpdateAtom(formElementAtom(formId));
 
-  const validateField: FormState["validateField"] = useCallback(
-    async (fieldName) => {
+  useEffect(() => {
+    setHydrated(true);
+    return () => cleanupFormState(formId);
+  }, [formId, setHydrated]);
+
+  const validateField: SyncedFormProps["validateField"] = useCallback(
+    async (field) => {
       invariant(formRef.current, "Cannot find reference to form");
       const { error } = await validator.validateField(
         getDataFromForm(formRef.current),
-        fieldName as any
+        field
       );
 
       if (error) {
-        addError({ formAtom, name: fieldName, error });
+        setFieldError({ field, error });
         return error;
       } else {
-        clearError({ name: fieldName, formAtom });
+        setFieldError({ field, error: undefined });
         return null;
       }
     },
-    [addError, clearError, formAtom, validator]
+    [setFieldError, validator]
   );
 
   const customFocusHandlers = useMultiValueMap<string, () => void>();
-  const registerReceiveFocus: FormState["registerReceiveFocus"] = useCallback(
-    (fieldName, handler) => {
-      customFocusHandlers().add(fieldName, handler);
-      return () => {
-        customFocusHandlers().remove(fieldName, handler);
-      };
-    },
-    [customFocusHandlers]
-  );
+  const registerReceiveFocus: SyncedFormProps["registerReceiveFocus"] =
+    useCallback(
+      (fieldName, handler) => {
+        customFocusHandlers().add(fieldName, handler);
+        return () => {
+          customFocusHandlers().remove(fieldName, handler);
+        };
+      },
+      [customFocusHandlers]
+    );
 
   useLayoutEffect(() => {
-    syncFormContext({
-      formAtom,
+    syncFormProps({
       action,
-      defaultValues: providedDefaultValues ?? backendDefaultValues,
+      defaultValues: providedDefaultValues ?? backendDefaultValues ?? {},
       subaction,
       validateField,
       registerReceiveFocus,
     });
   }, [
     action,
-    formAtom,
     providedDefaultValues,
     registerReceiveFocus,
     subaction,
-    syncFormContext,
+    syncFormProps,
     validateField,
     backendDefaultValues,
   ]);
 
   useEffect(() => {
-    setFieldErrors({
-      fieldErrors: backendError?.fieldErrors ?? {},
-      formAtom,
-    });
-  }, [backendError?.fieldErrors, formAtom, setFieldErrors]);
+    setFieldErrors(backendError?.fieldErrors ?? {});
+  }, [backendError?.fieldErrors, setFieldErrors, setFieldError]);
 
   useSubmitComplete(hasActiveSubmission, () => {
-    endSubmit({ formAtom });
+    endSubmit();
   });
 
   let clickedButtonRef = React.useRef<any>();
@@ -334,11 +330,11 @@ export function ValidatedForm<DataType>({
   }, []);
 
   const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
-    startSubmit({ formAtom });
+    startSubmit();
     const result = await validator.validate(getDataFromForm(e.currentTarget));
     if (result.error) {
-      endSubmit({ formAtom });
-      setFieldErrors({ fieldErrors: result.error.fieldErrors, formAtom });
+      endSubmit();
+      setFieldErrors(result.error.fieldErrors);
       if (!disableFocusOnError) {
         focusFirstInvalidInput(
           result.error.fieldErrors,
@@ -350,7 +346,7 @@ export function ValidatedForm<DataType>({
       const eventProxy = formEventProxy(e);
       await onSubmit?.(result.data, eventProxy);
       if (eventProxy.defaultPrevented) {
-        endSubmit({ formAtom });
+        endSubmit();
         return;
       }
 
@@ -372,7 +368,7 @@ export function ValidatedForm<DataType>({
 
   return (
     <Form
-      ref={mergeRefs([formRef, formRefProp])}
+      ref={mergeRefs([formRef, formRefProp, setFormElementInState])}
       {...rest}
       id={id}
       action={action}
@@ -385,7 +381,7 @@ export function ValidatedForm<DataType>({
       onReset={(event) => {
         onReset?.(event);
         if (event.defaultPrevented) return;
-        reset({ formAtom });
+        reset();
       }}
     >
       <InternalFormContext.Provider value={contextValue}>