@homebound/form-state 2.23.0 → 2.23.1

package/dist/fields/objectField.js

@@ -91,6 +91,7 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
         _kind: "object",
         _readOnly: false,
         _loading: false,
+        _isAutoSaving: false,
         _considerDeleted() {
             const deleteField = getFields(this).find((f) => f._isDeleteKey);
             return !!(deleteField === null || deleteField === void 0 ? void 0 : deleteField.value);
@@ -169,6 +170,17 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
         },
         // Saves all current values into _originalValue
         commitChanges() {
+            if (this._isAutoSaving) {
+                // `commitChanges` will mark all WIP changes as committed, which might drop changes if there
+                // is an auto-save in-flight, and the user made more changes, that are waiting for their turn
+                // on the next auto-save request.
+                //
+                // Instead of doing a form-wide "all changes are committed", instead autosave forms should use
+                // init.map/input to have the server's latest results updated within the form, which will then
+                // selectively "un-dirty"/commit the just-saved data, but keep the "still-dirty" WIP data alone.
+                throw new Error("When using autoSave, you should not manually call commitChanges, instead have init.map/input update the form state");
+            }
+            // asdf
             getFields(this).forEach((f) => f.commitChanges());
         },
         // Create a result that is only populated with changed keys

package/dist/useFormState.js

@@ -32,6 +32,10 @@ function useFormState(opts) {
                 pendingAutoSave = true;
             }
             else if (isAutoSaving === "queued") {
+                // If we've queued up an auto-save, that means we haven't called the `autoSave(...)` function yet, so
+                // we assume that the scheduled-but-not-yet-invoked invocation will find both it's original change, and
+                // also this potentially new change, and put them both onto the wire as a single operation.
+                // So we can just ignore this call.
                 return;
             }
             // Don't use canSave() because we don't want to set touched for all the fields
@@ -41,8 +45,12 @@ function useFormState(opts) {
                 // We use setTimeout as a cheap way to wait until the end of the current event listener
                 setTimeout(async () => {
                     try {
+                        // Tell commitChanges to blow up.
+                        form._isAutoSaving = true;
                         // 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.
+                        // user's autoSave function itself wants to call a .set (which would call `maybeAutoSave`,
+                        // and we don't want it to see `isAutoSaving=in-flight` and think it "missed the boat",
+                        // and so schedule an unnecessary follow-up autosave.)
                         const promise = autoSaveRef.current(form);
                         isAutoSaving = "in-flight";
                         await promise;
@@ -53,6 +61,7 @@ function useFormState(opts) {
                     }
                     finally {
                         isAutoSaving = false;
+                        form._isAutoSaving = false;
                         if (pendingAutoSave) {
                             pendingAutoSave = false;
                             // Push out the follow-up by 1 tick to allow refreshes to happen to potentially

package/dist/useFormState.test.js

@@ -539,6 +539,35 @@ describe("useFormState", () => {
         expect(r.originalValue).toHaveTextContent("a1");
         expect(r.objectValue).toHaveTextContent("a1");
     });
+    it("doesn't allow calling commitChanges", async () => {
+        // Given a component
+        const autoSave = jest.fn();
+        function TestComponent() {
+            const config = authorConfig;
+            const form = (0, useFormState_1.useFormState)({
+                config,
+                init: { firstName: "f1", lastName: "f1" },
+                autoSave: async (form) => {
+                    autoSave(form.changedValue);
+                    // And the autoSave functions erroneously calls commitChanges
+                    form.commitChanges();
+                },
+            });
+            return (0, jsx_runtime_1.jsx)("button", { "data-testid": "set", onClick: () => form.firstName.set("f2") });
+        }
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        // When we change a field, and try to commit, it blows up
+        // await expect(clickAndWait(r.set)).rejects.toThrow(
+        //   "When using autoSave, you should not manually call commitChanges",
+        // );
+        //
+        // ...for some reason, I think maybe due to rtl-utils calling runOnlyPendingTimers
+        // instead of runOnlyPendingTimers async, the `clickAndWait` actually resolves
+        // successfully (it's not a rejected promise), and our test technically keeps running,
+        // except then somewhere in the guts of Jest, the fake timer infra realizes that a tick
+        // failed (our autosave is actually fired from a setTimout tick), and so the Jest test
+        // fails anyway, but without anyway for us to catch and do a `.toThrow` assertion.
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/package.json

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