@homebound/form-state 2.5.0 → 2.5.1

package/dist/setupTests.js

@@ -4,5 +4,10 @@ require("@testing-library/jest-dom");
 const mobx_1 = require("mobx");
 // formState doesn't use actions
 mobx_1.configure({ enforceActions: "never" });
-beforeAll(() => jest.useFakeTimers("modern"));
-afterAll(() => jest.useRealTimers());
+beforeEach(() => {
+    jest.useFakeTimers("modern");
+});
+afterEach(() => {
+    jest.runOnlyPendingTimers();
+    jest.useRealTimers();
+});

package/dist/useFormState.d.ts

@@ -37,7 +37,7 @@ export declare type UseFormStateOpts<T, I> = {
      *
      * Does not need to be stable/useMemo'd.
      */
-    autoSave?: (state: ObjectState<T>) => Promise<void>;
+    autoSave?: (state: ObjectState<T>) => Promise<unknown>;
 };
 /**
  * Creates a formState instance for editing in a form.

package/dist/useFormState.js

@@ -12,6 +12,7 @@ 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.
  */
@@ -27,23 +28,36 @@ function useFormState(opts) {
     // If they're using init.input, useMemo on it (and it might be an array), otherwise allow the identity of init be unstable
     const dep = init && "input" in init && "map" in init ? (Array.isArray(init.input) ? init.input : [init.input]) : [];
     const form = react_1.useMemo(() => {
-        async function maybeAutoSave() {
-            if (isAutoSaving) {
+        function maybeAutoSave() {
+            if (isAutoSaving === "in-flight") {
                 pendingAutoSave = true;
             }
+            else if (isAutoSaving === "queued") {
+                return;
+            }
             // Don't use canSave() because we don't want to set touched for all the fields
             if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
-                try {
-                    isAutoSaving = true;
-                    await autoSaveRef.current(form);
-                }
-                finally {
-                    isAutoSaving = false;
-                    if (pendingAutoSave) {
-                        pendingAutoSave = false;
-                        await maybeAutoSave();
+                isAutoSaving = "queued";
+                // We use setTimeout as a cheap way to wait until the end of the current event listener
+                timerId = 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.
+                        const promise = autoSaveRef.current(form);
+                        isAutoSaving = "in-flight";
+                        await promise;
+                    }
+                    finally {
+                        isAutoSaving = false;
+                        if (pendingAutoSave) {
+                            pendingAutoSave = false;
+                            // Push out the follow-up by 1 tick to allow refreshes to happen to potentially
+                            // un-dirty the just-saved data (e.g. if we run right away, the caller's maybeAutoSave
+                            // will see a form.changedValue that thinks the just-saved data is still dirty).
+                            setTimeout(maybeAutoSave, 0);
+                        }
                     }
-                }
+                }, 0);
             }
         }
         const value = firstRunRef.current ? firstInitValue : utils_1.initValue(config, init);

package/dist/useFormState.test.js

@@ -2,8 +2,9 @@
 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_react_1 = require("mobx-react");
-const react_1 = require("react");
+const react_2 = require("react");
 const formState_1 = require("./formState");
 const useFormState_1 = require("./useFormState");
 describe("useFormState", () => {
@@ -26,7 +27,7 @@ describe("useFormState", () => {
     it("memoizes on init.input being an array", async () => {
         const config = { firstName: { type: "value" } };
         function TestComponent() {
-            const [, setTick] = react_1.useState(0);
+            const [, setTick] = react_2.useState(0);
             const form = useFormState_1.useFormState({
                 config,
                 init: { input: ["a", "b"], map: ([a, b]) => ({ firstName: a + b }) },
@@ -85,7 +86,7 @@ describe("useFormState", () => {
     it("uses init if set as a value", async () => {
         const config = { firstName: { type: "value" } };
         function TestComponent() {
-            const [, setTick] = react_1.useState(0);
+            const [, setTick] = react_2.useState(0);
             const form = useFormState_1.useFormState({
                 config,
                 // That's using a raw init value
@@ -153,7 +154,7 @@ describe("useFormState", () => {
                 ],
             };
             // And we start out with data1
-            const [data, setData] = react_1.useState(data1);
+            const [data, setData] = react_2.useState(data1);
             const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
             function makeLocalChanges() {
                 form.firstName.value = "local";
@@ -229,7 +230,7 @@ describe("useFormState", () => {
                 books: [{ title: "a2" }],
             };
             // And we start out with data1
-            const [data, setData] = react_1.useState(data1);
+            const [data, setData] = react_2.useState(data1);
             const form = useFormState_1.useFormState({
                 config,
                 init: { input: data, map: (d) => d },
@@ -270,9 +271,9 @@ describe("useFormState", () => {
             const data1 = { firstName: "f1", lastName: "l1" };
             const data2 = { firstName: "f2", lastName: "l2" };
             // And we start out with data1
-            const [data, setData] = react_1.useState(data1);
-            const author = react_1.useMemo(() => new AuthorRow(data.firstName, data.lastName), [data]);
-            const config = react_1.useMemo(() => ({
+            const [data, setData] = react_2.useState(data1);
+            const author = react_2.useMemo(() => new AuthorRow(data.firstName, data.lastName), [data]);
+            const config = react_2.useMemo(() => ({
                 firstName: { type: "value" },
                 lastName: { type: "value" },
                 fullName: { type: "value", computed: true },
@@ -296,7 +297,7 @@ describe("useFormState", () => {
         // Given a component
         function TestComponent() {
             // When the data is initially undefined
-            const [data, setData] = react_1.useState();
+            const [data, setData] = react_2.useState();
             const data2 = { books: [{ title: "Title 1" }] };
             const form = useFormState_1.useFormState({
                 config: authorWithBooksConfig,
@@ -317,7 +318,7 @@ describe("useFormState", () => {
         // Then we don't auto-save because nothing has changed
         expect(autoSave).toBeCalledTimes(0);
         // And when adding a new book
-        rtl_utils_1.click(r.add);
+        await rtl_utils_1.clickAndWait(r.add);
         // We autoSave the new row right away (because we don't have any validation rules
         // that say the new row can't be empty)
         expect(autoSave).toBeCalledTimes(1);
@@ -345,11 +346,35 @@ describe("useFormState", () => {
         }
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         // When we change firstName
-        rtl_utils_1.click(r.setFirst);
+        await rtl_utils_1.clickAndWait(r.setFirst);
         // When autoSave didn't infinite loop
         expect(autoSaves).toEqual(1);
     });
-    it("can queue up changes for auto save if a save is already in progress", async () => {
+    it("batches calls to auto-save", async () => {
+        // Given a component
+        const autoSave = jest.fn();
+        function TestComponent() {
+            const config = authorConfig;
+            const data = { firstName: "f1", lastName: "f1" };
+            const form = useFormState_1.useFormState({
+                config,
+                init: data,
+                autoSave: (form) => autoSave(form.changedValue),
+            });
+            return (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx("button", { "data-testid": "set", onClick: () => {
+                        // And it sets two fields in a single callback
+                        form.firstName.set("f2");
+                        form.lastName.set("l2");
+                    } }, void 0) }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // When we change both
+        await rtl_utils_1.clickAndWait(r.set);
+        // Then we only call autoSave once
+        expect(autoSave).toBeCalledTimes(1);
+        expect(autoSave).toBeCalledWith({ firstName: "f2", lastName: "l2" });
+    });
+    it("queues changes for auto save if a save is already in progress", async () => {
         const autoSaveStub = jest.fn();
         const config = {
             id: { type: "value" },
@@ -358,15 +383,17 @@ describe("useFormState", () => {
         };
         // Given a component using `getObjectState` for lazily creating ObjectStates
         function TestComponent() {
-            const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Brandon", lastName: "Dow" });
+            const [apiData, setApiData] = react_2.useState({ id: "a:1", firstName: "Brandon", lastName: "Dow" });
             const state = useFormState_1.useFormState({ config, autoSave, init: { input: apiData, map: (v) => v } });
             async function autoSave(form) {
                 autoSaveStub(form.changedValue);
+                const changed = form.changedValue;
                 // Pretend to make an API call and update the local state
-                setApiData((prevState) => ({ ...prevState, ...form.changedValue }));
                 await Promise.resolve(1);
+                setApiData((prevState) => ({ ...prevState, ...changed }));
             }
-            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
+            return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsxs("div", Object.assign({ "data-testid": "name" }, { children: [apiData.firstName, " ", apiData.lastName] }), void 0),
+                    jsx_runtime_1.jsx("button", { "data-testid": "focusSetAndSaveField", onClick: () => {
                             state.firstName.focus();
                             state.firstName.set("Foo");
                             state.firstName.maybeAutoSave();
@@ -379,10 +406,19 @@ describe("useFormState", () => {
                         } }, void 0)] }, void 0));
         }
         const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
-        // And triggering the auto save behavior before awaiting the initial promise to resolve so we have pending changes.
-        rtl_utils_1.click(r.focusSetAndSaveField());
-        rtl_utils_1.click(r.focusSetAndSaveFieldLastName());
-        // Awaits the promises for all methods triggered above
+        // And triggering the auto save behavior before awaiting the initial promise to
+        // resolve so we have pending changes.
+        rtl_utils_1.click(r.focusSetAndSaveField(), { allowAsync: true });
+        // Let the initial autoSave be called
+        react_1.act(() => {
+            jest.runOnlyPendingTimers();
+        });
+        expect(r.name()).toHaveTextContent("Brandon Dow");
+        expect(autoSaveStub).toBeCalledTimes(1);
+        expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "Foo" });
+        // And while that is in flight, trigger another user action
+        rtl_utils_1.click(r.focusSetAndSaveFieldLastName(), { allowAsync: true });
+        // (Use `wait` so that our timer flushes before the Promise.resolve(1) is ran)
         await rtl_utils_1.wait();
         // Then expect the auto save to only have been called twice. Once with each changedValues.
         expect(autoSaveStub).toBeCalledTimes(2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -40,16 +40,16 @@
   },
   "devDependencies": {
     "@babel/core": "^7.13.1",
-    "@homebound/rtl-utils": "^2.40.0",
+    "@homebound/rtl-utils": "^2.59.2",
     "@semantic-release/git": "^9.0.0",
     "@storybook/addon-essentials": "^6.2.9",
     "@storybook/addon-info": "^5.3.21",
     "@storybook/addon-links": "^6.2.9",
     "@storybook/addons": "^6.2.9",
     "@storybook/react": "^6.2.9",
-    "@testing-library/dom": "^7.31.0",
-    "@testing-library/jest-dom": "^5.12.0",
-    "@testing-library/react": "^11.2.7",
+    "@testing-library/dom": "^8.11.3",
+    "@testing-library/jest-dom": "^5.16.2",
+    "@testing-library/react": "^12.1.2",
     "@tsconfig/recommended": "^1.0.1",
     "@types/jest": "^26.0.20",
     "@types/react": "^16.14.5",