@homebound/form-state 2.7.0 → 2.9.0

package/dist/FormStateApp.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="react" />
+import { FieldState } from "./index";
 export declare function FormStateApp(): JSX.Element;
+export declare function TextField(props: {
+    field: FieldState<any, string | null | undefined>;
+}): JSX.Element;

package/dist/FormStateApp.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormStateApp = void 0;
+exports.TextField = exports.FormStateApp = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const mobx_react_1 = require("mobx-react");
 const index_1 = require("./index");
@@ -91,3 +91,4 @@ function TextField(props) {
                                     jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_errors` }, { children: field.errors }), void 0),
                                     jsx_runtime_1.jsx("td", Object.assign({ "data-testid": `${field.key}_original` }, { children: field.originalValue }), void 0)] }, void 0) }, void 0)] }), void 0)] }, void 0)) }, void 0));
 }
+exports.TextField = TextField;

package/dist/useFormState.js

@@ -12,7 +12,6 @@ let isAutoSaving = false;
 // `pendingAutoSave` is a flag for determining if we need to immediately call `maybeAutoSave` again after the initial Promise finishes
 // This could happen if a field triggers auto-save while another field's auto-save is already in progress.
 let pendingAutoSave = false;
-let timerId;
 /**
  * Creates a formState instance for editing in a form.
  */
@@ -39,7 +38,7 @@ function useFormState(opts) {
             if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
                 isAutoSaving = "queued";
                 // We use setTimeout as a cheap way to wait until the end of the current event listener
-                timerId = setTimeout(async () => {
+                setTimeout(async () => {
                     try {
                         // We technically don't flip to in-flight until after the call in case the
                         // user's autoSave function itself wants to call a .set.

package/dist/useFormState.test.js

@@ -3,8 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const rtl_utils_1 = require("@homebound/rtl-utils");
 const react_1 = require("@testing-library/react");
+const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_2 = require("react");
+const FormStateApp_1 = require("./FormStateApp");
 const formState_1 = require("./formState");
 const useFormState_1 = require("./useFormState");
 describe("useFormState", () => {
@@ -425,6 +427,33 @@ describe("useFormState", () => {
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", lastName: "Bar" });
     });
+    it("calls autoSave with results of calculations in addRules", async () => {
+        const autoSaveStub = jest.fn();
+        const config = {
+            id: { type: "value" },
+            firstName: { type: "value" },
+            lastName: { type: "value" },
+        };
+        // Given a component that is using autoSave
+        function TestComponent() {
+            const fs = useFormState_1.useFormState({
+                config,
+                addRules(fs) {
+                    // And also has calculated values
+                    mobx_1.reaction(() => fs.firstName.value, (curr) => (fs.lastName.value = curr));
+                },
+                autoSave: (fs) => autoSaveStub(fs.changedValue),
+                init: { id: "a:1" },
+            });
+            return jsx_runtime_1.jsx(FormStateApp_1.TextField, { field: fs.firstName }, void 0);
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // When the user sets one field
+        await rtl_utils_1.typeAndWait(r.firstName, "first");
+        // Then we only called autoSave once
+        expect(autoSaveStub).toBeCalledTimes(1);
+        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/dist/useFormStates.d.ts

@@ -1,21 +1,41 @@
 import { ObjectConfig, ObjectState } from "./formState";
 export declare type ObjectStateCache<T, I> = Record<string, [ObjectState<T>, I]>;
 declare type UseFormStatesOpts<T, I> = {
+    /**
+     * The config to use for each form state.
+     *
+     * Should be stable/useMemo'd.
+     */
     config: ObjectConfig<T>;
-    /** Fired for each individual `ObjectState` when it's had a value change. */
+    /**
+     * Fired for each individual `ObjectState` when it's had a value change.
+     *
+     * Does not need to be stable/useMemo'd.
+     */
     autoSave?: (state: ObjectState<T>) => Promise<void>;
     /**
      * A hook to add custom, cross-field validation rules that can be difficult to setup directly in the config DSL.
      *
+     * This will be called once-per `ObjectState` instance, and so is effectively a `useEffect` hook with
+     * a `[config, objectState]` dependency.
+     *
      * Does not need to be stable/useMemo'd.
      */
     addRules?: (state: ObjectState<T>) => void;
-    /** Given an input to `getObjectState`, returns the identity value that we'll cache that value's form state on. */
+    /**
+     * Given an input to `getFormState`, returns the identity value that we'll cache that value's form state on.
+     *
+     * Does not need to be stable/useMemo'd.
+     */
     getId: (v: I) => string;
-    /** Maps an input to `getObjectState` to the actual form shape `T`. */
+    /**
+     * Maps an input to `getFormState` to the actual form shape `T`.
+     *
+     * Does not need to be stable/useMemo'd.
+     */
     map?: (input: Exclude<I, null | undefined>) => T;
 };
-export declare function useFormStates<T, I>(opts: UseFormStatesOpts<T, I>): {
-    getObjectState: (input: I) => ObjectState<T>;
+export declare function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): {
+    getFormState: (input: I) => ObjectState<T>;
 };
 export {};

package/dist/useFormStates.js

@@ -6,7 +6,10 @@ const formState_1 = require("./formState");
 const utils_1 = require("./utils");
 function useFormStates(opts) {
     const { config, autoSave, getId, map, addRules } = opts;
-    const objectStateCache = react_1.useMemo(() => ({}), [config]);
+    const objectStateCache = react_1.useMemo(() => ({}), 
+    // Force resetting the cache if config changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [config]);
     // Keep track of ObjectStates that triggered auto-save when a save was already in progress.
     const pendingAutoSaves = react_1.useRef([]);
     // Use a ref so our memo'ized `autoSave` always see the latest value
@@ -20,6 +23,13 @@ function useFormStates(opts) {
         if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
             try {
                 isAutoSaving = true;
+                // See if we have any reactions that want to run (i.e. added by addRules hooks)
+                await new Promise((resolve) => setTimeout(resolve, 0));
+                // If a reaction re-queued our form during the ^ wait, remove it
+                let i = -1;
+                while ((i = pendingAutoSaves.current.indexOf(form)) !== -1) {
+                    pendingAutoSaves.current.splice(i, 1);
+                }
                 await autoSaveRef.current(form);
             }
             finally {
@@ -30,28 +40,30 @@ function useFormStates(opts) {
             }
         }
     }
-    return {
-        getObjectState: (input) => {
-            const existing = objectStateCache[getId(input)];
-            let form = existing === null || existing === void 0 ? void 0 : existing[0];
-            // If it didn't exist, then add to the cache.
-            if (!form) {
-                form = formState_1.createObjectState(config, utils_1.initValue(config, map ? { map, input } : input), {
-                    maybeAutoSave: () => maybeAutoSave(form),
-                });
-                if (addRules) {
-                    addRules(form);
-                }
-                objectStateCache[getId(input)] = [form, input];
-            }
-            // If the source of truth changed, then update the existing state and return it.
-            if (existing && existing[1] !== input) {
-                form.set(utils_1.initValue(config, map ? { map, input } : input), { refreshing: true });
-                existing[1] = input;
+    const getFormState = react_1.useCallback((input) => {
+        const existing = objectStateCache[getId(input)];
+        let form = existing === null || existing === void 0 ? void 0 : existing[0];
+        // If it didn't exist, then add to the cache.
+        if (!form) {
+            form = formState_1.createObjectState(config, utils_1.initValue(config, map ? { map, input } : input), {
+                maybeAutoSave: () => maybeAutoSave(form),
+            });
+            if (addRules) {
+                addRules(form);
             }
-            return form;
-        },
-    };
+            objectStateCache[getId(input)] = [form, input];
+        }
+        // If the source of truth changed, then update the existing state and return it.
+        if (existing && existing[1] !== input) {
+            form.set(utils_1.initValue(config, map ? { map, input } : input), { refreshing: true });
+            existing[1] = input;
+        }
+        return form;
+    }, 
+    // Allow the user to not stable-ize getId, map, addRules, and autoSave
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [objectStateCache, config]);
+    return { getFormState };
 }
 exports.useFormStates = useFormStates;
 // If the user's autoSave hook makes some last-minute `.set` calls to sneak

package/dist/useFormStates.test.js

@@ -2,8 +2,10 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
 const rtl_utils_1 = require("@homebound/rtl-utils");
+const mobx_1 = require("mobx");
 const react_1 = require("react");
 const formState_1 = require("./formState");
+const FormStateApp_1 = require("./FormStateApp");
 const useFormStates_1 = require("./useFormStates");
 describe("useFormStates", () => {
     it("can lazily create form states", async () => {
@@ -14,12 +16,12 @@ describe("useFormStates", () => {
         }
         function TestComponent() {
             const config = { id: { type: "value" }, firstName: { type: "value" } };
-            const { getObjectState } = useFormStates_1.useFormStates({
+            const { getFormState } = useFormStates_1.useFormStates({
                 config,
                 autoSave,
                 getId: (o) => o.id,
             });
-            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ChildComponent, { os: getObjectState({ id: "a:1", firstName: "Brandon" }) }, void 0) }, void 0));
+            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0) }, void 0));
         }
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         // And the child component has defined state
@@ -28,13 +30,13 @@ describe("useFormStates", () => {
     it("can update existing object state from cache with new values", async () => {
         const autoSave = jest.fn();
         const config = { id: { type: "value" }, firstName: { type: "value" } };
-        // Given a component using `getObjectState` for lazily creating ObjectStates
+        // Given a component using `getFormState` for lazily creating ObjectStates
         function TestComponent() {
             const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Brandon" });
-            const { getObjectState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
-            const originalState = react_1.useMemo(() => getObjectState(apiData), []);
-            const state = getObjectState(apiData);
+            const originalState = react_1.useMemo(() => getFormState(apiData), []);
+            const state = getFormState(apiData);
             return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: state.firstName.value }), void 0),
                     jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),
                     jsx_runtime_1.jsx("button", { "data-testid": "updateApiData", onClick: () => setApiData((prevState) => ({ ...prevState, firstName: "Bob" })) }, void 0)] }, void 0));
@@ -57,13 +59,13 @@ describe("useFormStates", () => {
             firstName: { type: "value" },
             lastName: { type: "value" },
         };
-        // Given a component using `getObjectState` for lazily creating ObjectStates
+        // Given a component using `getFormState` for lazily creating ObjectStates
         function TestComponent() {
             const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Tony", lastName: "Stark" });
             const [apiData2, setApiData2] = react_1.useState({ id: "a:2", firstName: "Steve", lastName: "Rogers" });
-            const { getObjectState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
-            const state = getObjectState(apiData);
-            const state2 = getObjectState(apiData2);
+            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const state = getFormState(apiData);
+            const state2 = getFormState(apiData2);
             async function autoSave(form) {
                 autoSaveStub(form.changedValue);
                 // Pretend to make an API call and update the local state
@@ -99,10 +101,9 @@ describe("useFormStates", () => {
         rtl_utils_1.click(r.focusSetAndSaveField2());
         // Awaits the promises for all methods triggered above
         await rtl_utils_1.wait();
-        // Then expect the auto save to only have been called three times. Once with each set of changedValues.
-        expect(autoSaveStub).toBeCalledTimes(3);
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
-        expect(autoSaveStub).toBeCalledWith({ id: "a:1", lastName: "Bar" });
+        // Then expect the auto save to only have been called two times. Once with each set of changedValues.
+        expect(autoSaveStub).toBeCalledTimes(2);
+        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo", lastName: "Bar" });
         expect(autoSaveStub).toBeCalledWith({ id: "a:2", lastName: "Bar" });
     });
     it("clears out cache if configuration changes", async () => {
@@ -117,10 +118,10 @@ describe("useFormStates", () => {
         };
         function TestComponent() {
             const [config, setConfig] = react_1.useState(originalConfig);
-            const { getObjectState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
+            const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
-            const originalState = react_1.useMemo(() => getObjectState(apiData), []);
-            const state = getObjectState(apiData);
+            const originalState = react_1.useMemo(() => getFormState(apiData), []);
+            const state = getFormState(apiData);
             return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),
                     jsx_runtime_1.jsx("button", { "data-testid": "updateConfig", onClick: () => setConfig(updatedConfig) }, void 0)] }, void 0));
         }
@@ -138,19 +139,52 @@ describe("useFormStates", () => {
         const addRules = jest.fn();
         function TestComponent() {
             const config = { id: { type: "value" }, firstName: { type: "value" } };
-            const { getObjectState } = useFormStates_1.useFormStates({
+            const { getFormState } = useFormStates_1.useFormStates({
                 config,
                 addRules,
                 getId: (o) => o.id,
             });
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(ChildComponent, { os: getObjectState({ id: "a:1", firstName: "Brandon" }) }, void 0),
-                    jsx_runtime_1.jsx(ChildComponent, { os: getObjectState({ id: "a:1", firstName: "Brandon" }) }, void 0)] }, void 0));
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0),
+                    jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0)] }, void 0));
         }
         // When we render
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         // Then addRules was only called once
         expect(addRules).toHaveBeenCalledTimes(1);
     });
+    it("calls autoSave with results of calculations in addRules", async () => {
+        // Given a user wants to use auto save
+        const autoSave = jest.fn();
+        function TestComponent() {
+            const config = {
+                id: { type: "value" },
+                firstName: { type: "value" },
+                lastName: { type: "value" },
+            };
+            const { getFormState } = useFormStates_1.useFormStates({
+                config,
+                getId: (o) => o.id,
+                addRules(fs) {
+                    // And they have a reactive true that calculates last name
+                    mobx_1.reaction(() => fs.firstName.value, (curr) => {
+                        console.log({ curr });
+                        fs.lastName.set(curr);
+                    });
+                },
+                async autoSave(fs) {
+                    autoSave(fs.changedValue);
+                },
+            });
+            return jsx_runtime_1.jsx(FormStateApp_1.TextField, { field: getFormState({ id: "a:1", firstName: "Brandon" }).firstName }, void 0);
+        }
+        // When we render
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // And update the firstName
+        await rtl_utils_1.typeAndWait(r.firstName(), "first");
+        // Then autoSave was called once with both input+calc'd values
+        expect(autoSave).toHaveBeenCalledTimes(1);
+        expect(autoSave).toHaveBeenCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
+    });
 });
 function ChildComponent({ os }) {
     return jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: os.firstName.value }), void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.7.0",
+  "version": "2.9.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",