@homebound/form-state 2.5.0 → 2.6.0

package/dist/formState.js

@@ -431,10 +431,22 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
         },
         get changedValue() {
             const result = [];
-            const pushAll = listConfig.update !== "incremental";
+            const hasOpKey = Object.keys(listConfig.config).includes("op");
+            const hasLegacyOpKey = Object.keys(listConfig.config).some((key) => key === "delete" || key === "remove");
+            const incremental = listConfig.update === "incremental" ||
+                // Implicitly enable incremental mode if we see an op key
+                (listConfig.update === undefined && (hasOpKey || hasLegacyOpKey));
+            const exhaustive = !incremental;
             this.rows.forEach((r) => {
-                if (pushAll || r.dirty) {
-                    result.push(r.changedValue);
+                var _a;
+                var _b;
+                if (exhaustive || r.dirty || r.isNewEntity) {
+                    const changed = r.changedValue;
+                    // Ensure we have an `op: include` key, following https://joist-orm.io/docs/features/partial-update-apis
+                    if (incremental && hasOpKey) {
+                        (_a = (_b = changed).op) !== null && _a !== void 0 ? _a : (_b.op = "include");
+                    }
+                    result.push(changed);
                 }
             });
             return result;
@@ -512,7 +524,7 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             this.rows.forEach((r) => {
                 r.save();
             });
-            originalCopy = parentInstance[key];
+            originalCopy = [...(parentInstance[key] || [])];
             _tick.value++;
         },
         ensureSet() {

package/dist/formState.test.js

@@ -979,6 +979,81 @@ describe("formState", () => {
             books: [{ id: "b:1", title: "t1b" }],
         });
     });
+    it("uses the op key as a hint to use incremental list behavior", () => {
+        // Given an author
+        const formState = formState_1.createObjectState({
+            id: { type: "value" },
+            // And the books collection is not explicitly marked as incremental
+            books: {
+                type: "list",
+                config: {
+                    id: { type: "value" },
+                    title: { type: "value", rules: [formState_1.required] },
+                    // But it does have an op key
+                    op: { type: "value" },
+                },
+            },
+        }, {
+            id: "a:1",
+            firstName: "f",
+            books: [
+                // And the books start out as included
+                { id: "b:1", title: "t1", op: "include" },
+                { id: "b:2", title: "t2", op: "include" },
+            ],
+        });
+        // And initially nothing is changed
+        expect(formState.changedValue).toEqual({ id: "a:1" });
+        // When we delete the 1st book
+        formState.books.rows[0].op.value = "delete";
+        // Then only the 1st book is included
+        expect(formState.changedValue).toEqual({
+            id: "a:1",
+            books: [{ id: "b:1", op: "delete" }],
+        });
+    });
+    it("defaults the incremental op key to included when not set", () => {
+        // Given an author
+        const formState = formState_1.createObjectState({
+            id: { type: "value" },
+            // And the books collection is not explicitly marked as incremental
+            books: {
+                type: "list",
+                config: {
+                    id: { type: "value" },
+                    title: { type: "value", rules: [formState_1.required] },
+                    // But it does have an op key
+                    op: { type: "value" },
+                },
+            },
+        }, {
+            id: "a:1",
+            firstName: "f",
+            books: [
+                // And no op keys are initially set
+                { id: "b:1", title: "t1" },
+                { id: "b:2", title: "t2" },
+            ],
+        });
+        // And initially nothing is changed
+        expect(formState.changedValue).toEqual({ id: "a:1" });
+        // When we delete the 1st book
+        formState.books.rows[0].op.value = "delete";
+        // And add a 3rd book
+        formState.books.add({ title: "t3" });
+        // Then the 3rd book doesn't have an explicit op yet
+        expect(formState.books.rows[2].op.value).toBeUndefined();
+        // But when we create changedValue
+        expect(formState.changedValue).toEqual({
+            id: "a:1",
+            books: [
+                // Then the deleted book is included
+                { id: "b:1", op: "delete" },
+                // And the 3rd book is included w/the `op: include` flag added
+                { title: "t3", op: "include" },
+            ],
+        });
+    });
     it("can observe value changes", () => {
         const formState = formState_1.createObjectState(authorWithBooksConfig, { firstName: "f" });
         let ticks = 0;
@@ -1145,6 +1220,23 @@ describe("formState", () => {
         expect(formState.books.rows[1].isNewEntity).toBeTruthy();
         expect(formState.books.isNewEntity).toBeFalsy();
     });
+    it("can properly evaluate dirty lists after calling 'save'", () => {
+        // Given an empty list state
+        const a1 = createAuthorInputState({ books: [] });
+        expect(a1.books.dirty).toBeFalsy();
+        // When adding a book
+        a1.books.add({ title: "t2" });
+        // Then the list state is dirty
+        expect(a1.books.dirty).toBeTruthy();
+        // When saving the form state
+        a1.save();
+        // Then the list is no longer dirty
+        expect(a1.books.dirty).toBeFalsy();
+        // When adding a new book
+        a1.books.add({ title: "t3" });
+        // The list is again dirty
+        expect(a1.books.dirty).toBeTruthy();
+    });
 });
 class ObservableObject {
     constructor() {

package/dist/formStateDomain.d.ts

@@ -26,6 +26,7 @@ export interface BookInput {
     classification?: DeweyDecimalClassification;
     delete?: boolean | null | undefined;
     isPublished?: boolean;
+    op?: "include" | "delete" | "remove";
 }
 export interface DeweyDecimalClassification {
     number: string;

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.6.0",
   "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",