remix-validated-form 4.1.0-beta.2 → 4.1.2

package/build/internal/logic/setInputValueInForm.js

@@ -0,0 +1,47 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setInputValueInForm = void 0;
+const tiny_invariant_1 = __importDefault(require("tiny-invariant"));
+const getCheckboxChecked_1 = require("./getCheckboxChecked");
+const getRadioChecked_1 = require("./getRadioChecked");
+const setElementValue = (element, value, name) => {
+    if (element instanceof HTMLSelectElement && element.multiple) {
+        (0, tiny_invariant_1.default)(Array.isArray(value), "Must specify an array to set the value for a multi-select");
+        for (const option of element.options) {
+            option.selected = value.includes(option.value);
+        }
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "checkbox") {
+        const newChecked = (0, getCheckboxChecked_1.getCheckboxChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked !== undefined, `Unable to determine if checkbox should be checked. Provided value was ${value} for checkbox ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    if (element instanceof HTMLInputElement && element.type === "radio") {
+        const newChecked = (0, getRadioChecked_1.getRadioChecked)(element.value, value);
+        (0, tiny_invariant_1.default)(newChecked !== undefined, `Unable to determine if radio should be checked. Provided value was ${value} for radio ${name}.`);
+        element.checked = newChecked;
+        return;
+    }
+    (0, tiny_invariant_1.default)(typeof value === "string", `Invalid value for field "${name}" which is an ${element.constructor.name}. Expected string but received ${typeof value}`);
+    const input = element;
+    input.value = value;
+};
+const setInputValueInForm = (formElement, name, value) => {
+    const controlElement = formElement.elements.namedItem(name);
+    if (!controlElement)
+        return;
+    if (controlElement instanceof RadioNodeList) {
+        for (const element of controlElement) {
+            setElementValue(element, value, name);
+        }
+    }
+    else {
+        setElementValue(controlElement, value, name);
+    }
+};
+exports.setInputValueInForm = setInputValueInForm;

package/build/internal/state-valtio.d.ts

@@ -0,0 +1,62 @@
+import { FieldErrors, TouchedFields } from "..";
+export declare type InternalFormState = {
+    hydrated: boolean;
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    validateField: (fieldName: string) => Promise<string | null>;
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    setFieldValue: (fieldName: string, value: unknown) => void;
+};
+declare type SyncFormArgs = {
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    validateField: InternalFormState["validateField"];
+    registerReceiveFocus: InternalFormState["registerReceiveFocus"];
+    setFieldValueForForm: InternalFormState["setFieldValue"];
+};
+declare type StoreState = {
+    forms: {
+        [formId: string | symbol]: InternalFormState;
+    };
+};
+export declare const state: StoreState;
+export declare const registerFormSlice: (formId: string | symbol, { registerReceiveFocus, setFieldValueForForm, validateField, action, defaultValues, subaction, }: SyncFormArgs) => void;
+export declare const unregisterFormSlice: (formId: string | symbol) => void;
+export declare const useFormData: (formId: string | symbol) => {
+    readonly hydrated: boolean;
+    readonly fieldErrors: {
+        readonly [x: string]: string;
+    };
+    readonly isSubmitting: boolean;
+    readonly hasBeenSubmitted: boolean;
+    readonly touchedFields: {
+        readonly [x: string]: boolean;
+    };
+    readonly action?: string | undefined;
+    readonly subaction?: string | undefined;
+    readonly defaultValues: {
+        readonly [x: string]: any;
+    };
+    readonly validateField: (fieldName: string) => Promise<string | null>;
+    readonly registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    readonly setFieldValue: (fieldName: string, value: unknown) => void;
+};
+export declare const startSubmit: (formId: string | symbol) => void;
+export declare const endSubmit: (formId: string | symbol) => void;
+export declare const sync: (formId: string | symbol, { defaultValues, action, subaction, registerReceiveFocus, validateField, setFieldValueForForm, }: SyncFormArgs) => void;
+export declare const clearError: (formId: string | symbol, fieldName: string) => void;
+export declare const addError: (formId: string | symbol, fieldName: string, error: string) => void;
+export declare const setTouched: (formId: string | symbol, fieldName: string, touched: boolean) => void;
+export declare const reset: (formId: string | symbol) => void;
+export declare const setFieldErrors: (formId: string | symbol, fieldErrors: FieldErrors) => void;
+export {};

package/build/internal/state-valtio.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setFieldErrors = exports.reset = exports.setTouched = exports.addError = exports.clearError = exports.sync = exports.endSubmit = exports.startSubmit = exports.useFormData = exports.unregisterFormSlice = exports.registerFormSlice = exports.state = void 0;
+const valtio_1 = require("valtio");
+exports.state = (0, valtio_1.proxy)({ forms: {} });
+const registerFormSlice = (formId, { registerReceiveFocus, setFieldValueForForm, validateField, action, defaultValues, subaction, }) => {
+    exports.state.forms[formId] = {
+        hydrated: true,
+        defaultValues: defaultValues !== null && defaultValues !== void 0 ? defaultValues : {},
+        fieldErrors: {},
+        hasBeenSubmitted: false,
+        isSubmitting: false,
+        touchedFields: {},
+        registerReceiveFocus,
+        setFieldValue: setFieldValueForForm,
+        validateField,
+        action,
+        subaction,
+    };
+};
+exports.registerFormSlice = registerFormSlice;
+const unregisterFormSlice = (formId) => {
+    delete exports.state.forms[formId];
+};
+exports.unregisterFormSlice = unregisterFormSlice;
+const unhydratedFormState = {
+    hydrated: false,
+    fieldErrors: {},
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    defaultValues: {},
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+    setFieldValue: () => { },
+};
+const useFormData = (formId) => {
+    var _a;
+    const snapshot = (0, valtio_1.useSnapshot)(exports.state);
+    return (_a = snapshot.forms[formId]) !== null && _a !== void 0 ? _a : unhydratedFormState;
+};
+exports.useFormData = useFormData;
+const startSubmit = (formId) => {
+    exports.state.forms[formId].isSubmitting = true;
+    exports.state.forms[formId].hasBeenSubmitted = true;
+};
+exports.startSubmit = startSubmit;
+const endSubmit = (formId) => {
+    exports.state.forms[formId].isSubmitting = false;
+};
+exports.endSubmit = endSubmit;
+const sync = (formId, { defaultValues, action, subaction, registerReceiveFocus, validateField, setFieldValueForForm, }) => {
+    exports.state.forms[formId].defaultValues = defaultValues !== null && defaultValues !== void 0 ? defaultValues : {};
+    exports.state.forms[formId].action = action;
+    exports.state.forms[formId].subaction = subaction;
+    exports.state.forms[formId].registerReceiveFocus = registerReceiveFocus;
+    exports.state.forms[formId].validateField = validateField;
+    exports.state.forms[formId].hydrated = true;
+    exports.state.forms[formId].setFieldValue = setFieldValueForForm;
+};
+exports.sync = sync;
+const clearError = (formId, fieldName) => {
+    delete exports.state.forms[formId].fieldErrors[fieldName];
+};
+exports.clearError = clearError;
+const addError = (formId, fieldName, error) => {
+    exports.state.forms[formId].fieldErrors[fieldName] = error;
+};
+exports.addError = addError;
+const setTouched = (formId, fieldName, touched) => {
+    exports.state.forms[formId].touchedFields[fieldName] = touched;
+};
+exports.setTouched = setTouched;
+const reset = (formId) => {
+    exports.state.forms[formId].fieldErrors = {};
+    exports.state.forms[formId].touchedFields = {};
+    exports.state.forms[formId].hasBeenSubmitted = false;
+};
+exports.reset = reset;
+const setFieldErrors = (formId, fieldErrors) => {
+    exports.state.forms[formId].fieldErrors = fieldErrors;
+};
+exports.setFieldErrors = setFieldErrors;

package/build/internal/state-zustand.d.ts

@@ -0,0 +1,47 @@
+import { FieldErrors, TouchedFields } from "..";
+export declare type InternalFormState = {
+    hydrated: boolean;
+    fieldErrors: FieldErrors;
+    isSubmitting: boolean;
+    hasBeenSubmitted: boolean;
+    touchedFields: TouchedFields;
+    action?: string;
+    subaction?: string;
+    defaultValues: {
+        [fieldName: string]: any;
+    };
+    validateField: (fieldName: string) => Promise<string | null>;
+    registerReceiveFocus: (fieldName: string, handler: () => void) => () => void;
+    setFieldValue: (fieldName: string, value: unknown) => void;
+};
+declare type Helpers = {
+    startSubmit: () => void;
+    endSubmit: () => void;
+    sync: (args: SyncFormArgs) => void;
+    clearError: (name: string) => void;
+    addError: (name: string, error: string) => void;
+    setTouched: (name: string, touched: boolean) => void;
+    reset: () => void;
+    setFieldErrors: (fieldErrors: FieldErrors) => void;
+    register: (init: SyncFormArgs) => void;
+    unregister: () => void;
+};
+declare type SyncFormArgs = {
+    defaultValues?: {
+        [fieldName: string]: any;
+    };
+    action?: string;
+    subaction?: string;
+    validateField: InternalFormState["validateField"];
+    registerReceiveFocus: InternalFormState["registerReceiveFocus"];
+    setFieldValueForForm: InternalFormState["setFieldValue"];
+};
+declare type StoreState = {
+    forms: {
+        [formId: string | symbol]: InternalFormState;
+    };
+    form: (formId: string | symbol) => InternalFormState;
+    helpers: (formId: string | symbol) => Helpers;
+};
+export declare const useStore: import("zustand").UseBoundStore<StoreState, import("zustand").StoreApi<StoreState>>;
+export {};

package/build/internal/state-zustand.js

@@ -0,0 +1,91 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStore = void 0;
+const zustand_1 = __importDefault(require("zustand"));
+const immerMiddleware_1 = require("./immerMiddleware");
+const unhydratedFormState = {
+    hydrated: false,
+    fieldErrors: {},
+    isSubmitting: false,
+    hasBeenSubmitted: false,
+    touchedFields: {},
+    defaultValues: {},
+    validateField: () => Promise.resolve(null),
+    registerReceiveFocus: () => () => { },
+    setFieldValue: () => { },
+    // clearError: () => {},
+    // addError: () => {},
+    // setTouched: () => {},
+    // reset: () => {},
+    // startSubmit: () => {},
+    // endSubmit: () => {},
+    // sync: () => {},
+    // setFieldErrors: () => {},
+};
+exports.useStore = (0, zustand_1.default)((0, immerMiddleware_1.immer)((set, get) => ({
+    forms: {},
+    form: (formId) => { var _a; return (_a = get().forms[formId]) !== null && _a !== void 0 ? _a : unhydratedFormState; },
+    helpers: (formId) => ({
+        clearError: (name) => set((state) => {
+            delete state.forms[formId].fieldErrors[name];
+        }),
+        addError: (name, error) => set((state) => {
+            state.forms[formId].fieldErrors[name] = error;
+        }),
+        setTouched: (name, touched) => set((state) => {
+            state.forms[formId].touchedFields[name] = touched;
+        }),
+        reset: () => set((state) => {
+            state.forms[formId].fieldErrors = {};
+            state.forms[formId].touchedFields = {};
+            state.forms[formId].hasBeenSubmitted = false;
+        }),
+        startSubmit: () => set((state) => {
+            state.forms[formId].hasBeenSubmitted = true;
+            state.forms[formId].isSubmitting = true;
+        }),
+        endSubmit: () => set((state) => {
+            state.forms[formId].isSubmitting = false;
+        }),
+        setFieldErrors: (fieldErrors) => {
+            set((state) => {
+                state.forms[formId].fieldErrors = fieldErrors;
+            });
+        },
+        sync: ({ defaultValues, action, subaction, validateField, registerReceiveFocus, setFieldValueForForm, }) => set((state) => {
+            state.forms[formId].defaultValues = defaultValues !== null && defaultValues !== void 0 ? defaultValues : {};
+            state.forms[formId].action = action;
+            state.forms[formId].subaction = subaction;
+            state.forms[formId].registerReceiveFocus = registerReceiveFocus;
+            state.forms[formId].validateField = validateField;
+            state.forms[formId].hydrated = true;
+            state.forms[formId].setFieldValue = setFieldValueForForm;
+        }),
+        unregister: () => {
+            set((state) => {
+                delete state.forms[formId];
+            });
+        },
+        register: ({ defaultValues, action, subaction, validateField, registerReceiveFocus, setFieldValueForForm, }) => {
+            set((state) => {
+                state.forms[formId] = {
+                    defaultValues: defaultValues !== null && defaultValues !== void 0 ? defaultValues : {},
+                    setFieldValue: setFieldValueForForm,
+                    registerReceiveFocus,
+                    validateField,
+                    action,
+                    subaction,
+                    hydrated: true,
+                    fieldErrors: {},
+                    isSubmitting: false,
+                    hasBeenSubmitted: false,
+                    touchedFields: {},
+                    // helpers
+                };
+            });
+        },
+    }),
+})));

package/build/internal/util.d.ts

@@ -2,3 +2,4 @@ import type React from "react";
 export declare const omit: (obj: any, ...keys: string[]) => any;
 export declare const mergeRefs: <T = any>(refs: (React.MutableRefObject<T> | React.LegacyRef<T> | undefined)[]) => (instance: T | null) => void;
 export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useDeepEqualsMemo: <T>(item: T) => T;

package/build/internal/util.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+exports.useDeepEqualsMemo = exports.useIsomorphicLayoutEffect = exports.mergeRefs = exports.omit = void 0;
+const isEqual_1 = __importDefault(require("lodash/isEqual"));
 const react_1 = require("react");
 const omit = (obj, ...keys) => {
     const result = { ...obj };
@@ -24,3 +28,14 @@ const mergeRefs = (refs) => {
 };
 exports.mergeRefs = mergeRefs;
 exports.useIsomorphicLayoutEffect = typeof window !== "undefined" ? react_1.useLayoutEffect : react_1.useEffect;
+const useDeepEqualsMemo = (item) => {
+    const ref = (0, react_1.useRef)(item);
+    const areEqual = ref.current === item || (0, isEqual_1.default)(ref.current, item);
+    (0, react_1.useEffect)(() => {
+        if (!areEqual) {
+            ref.current = item;
+        }
+    });
+    return areEqual ? ref.current : item;
+};
+exports.useDeepEqualsMemo = useDeepEqualsMemo;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remix-validated-form",
-  "version": "4.1.0-beta.2",
+  "version": "4.1.2",
   "description": "Form component and utils for easy form validation in remix",
   "browser": "./browser/index.js",
   "main": "./build/index.js",

package/src/ValidatedForm.tsx

@@ -38,6 +38,7 @@ import {
 import { useSubmitComplete } from "./internal/submissionCallbacks";
 import {
   mergeRefs,
+  useDeepEqualsMemo,
   useIsomorphicLayoutEffect as useLayoutEffect,
 } from "./internal/util";
 import { FieldErrors, Validator } from "./validation/types";
@@ -191,6 +192,12 @@ 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`.
  */
@@ -200,7 +207,7 @@ export function ValidatedForm<DataType>({
   children,
   fetcher,
   action,
-  defaultValues: providedDefaultValues,
+  defaultValues: unMemoizedDefaults,
   formRef: formRefProp,
   onReset,
   subaction,
@@ -212,7 +219,8 @@ export function ValidatedForm<DataType>({
   ...rest
 }: FormProps<DataType>) {
   const formId = useFormId(id);
-  const formAtom = formRegistry(formId);
+  const formAtom = useFormAtom(formId);
+  const providedDefaultValues = useDeepEqualsMemo(unMemoizedDefaults);
   const contextValue = useMemo<InternalFormContextValue>(
     () => ({
       formId,

package/src/internal/MultiValueMap.ts

@@ -1,4 +1,4 @@
-import { useRef } from "react";
+import { useCallback, useRef } from "react";
 
 export class MultiValueMap<Key, Value> {
   private dict: Map<Key, Value[]> = new Map();
@@ -30,9 +30,9 @@ export class MultiValueMap<Key, Value> {
 
 export const useMultiValueMap = <Key, Value>() => {
   const ref = useRef<MultiValueMap<Key, Value> | null>(null);
-  return () => {
+  return useCallback(() => {
     if (ref.current) return ref.current;
     ref.current = new MultiValueMap();
     return ref.current;
-  };
+  }, []);
 };

package/src/internal/util.ts

@@ -1,5 +1,6 @@
+import isEqual from "lodash/isEqual";
 import type React from "react";
-import { useEffect, useLayoutEffect } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 
 export const omit = (obj: any, ...keys: string[]) => {
   const result = { ...obj };
@@ -25,3 +26,14 @@ export const mergeRefs = <T = any>(
 
 export const useIsomorphicLayoutEffect =
   typeof window !== "undefined" ? useLayoutEffect : useEffect;
+
+export const useDeepEqualsMemo = <T>(item: T): T => {
+  const ref = useRef<T>(item);
+  const areEqual = ref.current === item || isEqual(ref.current, item);
+  useEffect(() => {
+    if (!areEqual) {
+      ref.current = item;
+    }
+  });
+  return areEqual ? ref.current : item;
+};