@homebound/form-state 2.27.0 → 2.27.1

package/dist/fields/valueField.js

@@ -11,6 +11,13 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
     // which itself is not a proxy, we use this as our "value changed" trigger.
     const _tick = (0, mobx_1.observable)({ value: 1 });
     const _originalValueTick = (0, mobx_1.observable)({ value: 1 });
+    // Track "this is probably what we put into a mutation to the server" to allow
+    // use to better accept server acks/responses that change our initial submission.
+    //
+    // I.e. we submit `firstName: bob` and the server acks `firstName: Bob`, we should
+    // accept it if we can tell we haven't changed `bob` since our initial submission.
+    let hasInflightChangedValue = false;
+    let lastChangedValue = undefined;
     const field = {
         key: key,
         touched: false,
@@ -60,6 +67,10 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {
+            // Add some hints to let `set(..., { refreshing: true })` accept server-driven changes to our value,
+            // if the user hasn't changed it yet-again while the changedValue was in in-flight.
+            hasInflightChangedValue = true;
+            lastChangedValue = this.value;
             // Usually if we see a field being unset, we set `parent[key] = null`, but if we're wrapping
             // a mobx observable object, it might have changed to `undefined` without us being able to
             // tell it to be `null` (and potentially break the type contract of `string | undefined`).
@@ -100,12 +111,18 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
                 throw new Error(`${String(key)} is currently readOnly`);
             }
-            const isAckingUnset = this.value === null && (value === null || value === undefined);
-            if (opts.refreshing && this.dirty && this.value !== value && !isAckingUnset) {
-                // Ignore incoming values if we have changes (this.dirty) unless our latest change (this.value)
-                // matches the incoming value (value), b/c if it does we should accept it and reset originalValue
-                // so that we're no longer dirty.
-                return;
+            if (opts.refreshing && this.dirty) {
+                // See if we should ignore the incoming server-side value, to avoid dropping local WIP changes
+                const isAckingUnset = this.value === null && (value === null || value === undefined);
+                const acceptServerAck = hasInflightChangedValue && this.value === lastChangedValue;
+                // Ignore incoming values if we have changes (this.dirty) unless:
+                // - our latest change (this.value) matches the incoming value (value), i.e. the server
+                //   is exactly acking our change, or
+                // - the user hasn't made any changes since `.changedValue` was put on the wire, i.e. the
+                //   server received our value, but wanted to to change it.
+                const keepLocalWipChange = this.value !== value && !isAckingUnset && !acceptServerAck;
+                if (keepLocalWipChange)
+                    return;
             }
             else if (computed && (opts.resetting || opts.refreshing)) {
                 // Computeds can't be either reset or refreshed
@@ -117,6 +134,7 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
             // If a list of primitives was originally undefined, coerce `[]` to `undefined`
             const coerceEmptyList = value && value instanceof Array && value.length === 0 && (0, utils_1.isEmpty)(this.originalValue);
             const newValue = keepNull ? null : (0, utils_1.isEmpty)(value) || coerceEmptyList ? undefined : value;
+            hasInflightChangedValue = false;
             // Set the value on our parent object
             const changed = !(0, utils_1.areEqual)(newValue, this.value, strictOrder);
             parentInstance[key] = newValue;

package/dist/formState.test.js

@@ -1561,7 +1561,7 @@ describe("formState", () => {
         formState.books.add({ title: "b2" });
         expect(ticks).toEqual(2);
     });
-    it("does not override a focused, changed field", () => {
+    it("keeps WIP changes for changed field", () => {
         const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given first name is focused
         formState.firstName.focus();
@@ -1576,6 +1576,36 @@ describe("formState", () => {
         formState.firstName.set("fff");
         expect(formState.firstName.value).toEqual("fff");
     });
+    it("accepts server result if we have no further changes", () => {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { id: "a:1", firstName: "f" });
+        // Given first name has wip edits
+        formState.firstName.set("ff");
+        // When a mutation result sets both firstName and lastName
+        formState.set({ firstName: "f2" }, { refreshing: true });
+        // Then we don't overwrite the user's WIP work
+        expect(formState.firstName.value).toEqual("ff");
+        // But if we call changedValue, insinuating we're sending the value off to the server
+        expect(formState.changedValue).toEqual({ id: "a:1", firstName: "ff" });
+        // And now the server acks something different
+        formState.set({ firstName: "FF" }, { refreshing: true });
+        // Then we accept the value
+        expect(formState.firstName.value).toEqual("FF");
+        expect(formState.firstName.dirty).toEqual(false);
+    });
+    it("rejects server result if we have further changes", () => {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { id: "a:1", firstName: "f" });
+        // Given first name has wip edits
+        formState.firstName.set("ff");
+        // And we call changedValue, insinuating we're sending the value off to the server
+        expect(formState.changedValue).toEqual({ id: "a:1", firstName: "ff" });
+        // And the user changes the name yet again
+        formState.firstName.set("fff");
+        // And now the server acks something different
+        formState.set({ firstName: "FF" }, { refreshing: true });
+        // Then we keep the "post-changedValue" value
+        expect(formState.firstName.value).toEqual("fff");
+        expect(formState.firstName.dirty).toEqual(true);
+    });
     it("does update a focused, unchanged field", () => {
         const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given first name is focused, but has not changed

package/dist/useFormState.test.js

@@ -175,7 +175,7 @@ describe("useFormState", () => {
                 form.address.street.value = "local";
                 form.books.rows[0].title.value = "local";
             }
-            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "lastName", children: form.lastName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "city", children: form.address.city.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title2", children: form.books.rows[1].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveData", onClick: () => setData(data3) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "changedValue", children: JSON.stringify(form.changedValue) })] })) }));
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "lastName", children: form.lastName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "street", children: form.address.street.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "city", children: form.address.city.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title1", children: form.books.rows[0].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "title2", children: form.books.rows[1].title.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "saveData", onClick: () => setData(data3) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "dirty", children: String(form.dirty) })] })) }));
         }
         // And we start out with the initial query data
         const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
@@ -188,12 +188,7 @@ describe("useFormState", () => {
         expect(r.firstName.textContent).toEqual("local");
         expect(r.street.textContent).toEqual("local");
         expect(r.title1.textContent).toEqual("local");
-        expect(JSON.parse(r.changedValue.textContent)).toEqual({
-            id: "a:1",
-            address: { id: "address:1", street: "local" },
-            books: [{ id: "b:1", title: "local" }, { id: "b:2" }],
-            firstName: "local",
-        });
+        expect(r.dirty.textContent).toEqual("true");
         // And when the new query is ran i.e. due to a cache refresh
         (0, rtl_utils_1.click)(r.refreshData);
         // Then we kept our local changes
@@ -205,18 +200,41 @@ describe("useFormState", () => {
         expect(r.city.textContent).toEqual("c2");
         expect(r.title2.textContent).toEqual("b2");
         expect(r.booksLength.textContent).toEqual("3");
-        expect(JSON.parse(r.changedValue.textContent)).toEqual({
-            id: "a:1",
-            address: { id: "address:1", street: "local" },
-            books: [{ id: "b:1", title: "local" }, { id: "b:2" }, { id: "b:3" }],
-            firstName: "local",
-        });
+        expect(r.dirty.textContent).toEqual("true");
         // And then when our mutation results come back
         (0, rtl_utils_1.click)(r.saveData);
-        // Then changedValue doesn't show our local changes anymore
-        expect(JSON.parse(r.changedValue.textContent)).toEqual({
-            id: "a:1",
-        });
+        // And we're not dirty anymore
+        expect(r.dirty.textContent).toEqual("false");
+    });
+    it("accepts server values if client has no further changes", async () => {
+        function TestComponent() {
+            const config = authorWithAddressAndBooksConfig;
+            // The initial resposne
+            const data1 = { id: "a:1", firstName: "F1" };
+            // The acked response, which uppercases our submission
+            const data2 = { id: "a:1", firstName: "F2" };
+            // And we start out with data1
+            const [data, setData] = (0, react_2.useState)(data1);
+            const form = (0, useFormState_1.useFormState)({ config, init: { input: data } });
+            function makeLocalChanges() {
+                form.firstName.value = "f2";
+            }
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "makeLocalChanges", onClick: makeLocalChanges }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => {
+                                noop(form.changedValue); // pretend we put this on the wire
+                                setData(data2);
+                            } })] })) }));
+        }
+        // And we start out with the initial query data
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName.textContent).toEqual("F1");
+        // When we make some local changes
+        (0, rtl_utils_1.click)(r.makeLocalChanges);
+        // Then we see them
+        expect(r.firstName.textContent).toEqual("f2");
+        // And when the server acks a slightly different result
+        (0, rtl_utils_1.click)(r.refreshData);
+        // Then we accept it
+        expect(r.firstName.textContent).toEqual("F2");
     });
     it("can accept new data while read only", async () => {
         // Given a component
@@ -694,3 +712,4 @@ function focusAndBlur(state) {
     state.focus();
     state.blur();
 }
+function noop(value) { }

package/package.json

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