@homebound/form-state 2.8.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

@@ -35,7 +35,7 @@ declare type UseFormStatesOpts<T, I> = {
      */
     map?: (input: Exclude<I, null | undefined>) => T;
 };
-export declare function useFormStates<T, I>(opts: UseFormStatesOpts<T, I>): {
+export declare function useFormStates<T, I = T>(opts: UseFormStatesOpts<T, I>): {
     getFormState: (input: I) => ObjectState<T>;
 };
 export {};

package/dist/useFormStates.js

@@ -23,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 {

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 () => {
@@ -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 () => {
@@ -151,6 +152,39 @@ describe("useFormStates", () => {
         // 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.8.0",
+  "version": "2.9.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",