@homebound/form-state 2.27.1 → 2.27.3

package/dist/fields/listField.js

@@ -85,6 +85,11 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
         get dirty() {
             return this.rows.some((r) => r.dirty) || this.hasChanged();
         },
+        // Having a new entity is slightly different than being dirty, b/c merely having a placeholder-but-not-changed-yet
+        // `isNewEntity` child should not fire autosave (which would happen if we're dirty).
+        get hasNewEntity() {
+            return this.rows.some((r) => r.isNewEntity);
+        },
         get focused() {
             return this.rows.some((r) => r.focused);
         },
@@ -184,7 +189,7 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
             // passing us cloned rows from the parentCopy, but `getOrCreateChildState` will
             // use the `copyMap` to recover the non-cloned rows, to avoid promoting the clone
             // into a real row.
-            if (this.dirty && opts.refreshing) {
+            if ((this.dirty || this.hasNewEntity) && opts.refreshing) {
                 // When refreshing a dirty list, we need to preserve WIP values
                 // Start with current list, then merge in incoming changes
                 //
@@ -198,33 +203,44 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
                 const mergedItems = [];
                 // Index by idKey or a hash of the object, so we don't have to n^2 merging
                 const idKey = this.rows.length > 0 && this.rows[0].idKey;
-                const hashItem = (item) => (idKey && item[idKey]) || (0, object_hash_1.default)(item);
-                const hashWithoutId = (item) => (0, object_hash_1.default)(Object.fromEntries(Object.entries(item).filter(([key]) => key !== idKey)));
-                const currentById = (0, utils_1.groupBy)(currentItems, hashItem);
-                const incomingById = (0, utils_1.groupBy)(incomingItems, hashItem);
+                // Look at our child config, i.e. `bookConfig` and find the non-id / non-list keys
+                const contentKeys = Object.entries(config.config)
+                    .filter(([key, cfg]) => key !== idKey && cfg.type === "value")
+                    .map(([key]) => key);
+                const hashByContent = (item) => (0, object_hash_1.default)(Object.fromEntries(Object.entries(item).filter(([key]) => contentKeys.includes(key))));
+                const hashById = (item) => (idKey && item[idKey]) || hashByContent(item);
+                const currentById = (0, utils_1.groupBy)(currentItems, hashById);
+                const incomingById = (0, utils_1.groupBy)(incomingItems, hashById);
                 // If our local instance doesn't assign in id, when we get results back from the server, strip
                 // their id and then see if we're the same based on data. Note that this is a hueristic, and will
                 // fail if the client-side has made additional changes to the child after submitting it to the server,
                 // or if the server acks back more/different data than the client sent.
                 //
                 // Only do this if one of our client-side objects is missing an id
-                const incomingByHash = idKey && currentItems.some((item) => !item[idKey]) && (0, utils_1.groupBy)(incomingItems, hashWithoutId);
+                const incomingByContent = idKey && currentItems.some((item) => !item[idKey]) && (0, utils_1.groupBy)(incomingItems, hashByContent);
                 // Watch for deletions
                 const hasOpKey = Object.keys(listConfig.config).includes("op");
                 // First, process all current items
                 for (const currentItem of currentItems) {
                     const childState = rowMap.get(currentItem); // We'll always have a child state for `currentItems`
                     // Try to find a matching item in the incoming data
-                    const hash = hashItem(currentItem);
-                    const match = ((_b = (_a = incomingById.get(hash)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : (!!incomingByHash && ((_c = incomingByHash === null || incomingByHash === void 0 ? void 0 : incomingByHash.get(hash)) === null || _c === void 0 ? void 0 : _c[0])));
+                    const hash = hashById(currentItem);
+                    const match = ((_b = (_a = incomingById.get(hash)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _b !== void 0 ? _b : 
+                    // Only if we don't have `book[id]` set, look for a match based on our content
+                    (!!idKey &&
+                        !currentItem[idKey] &&
+                        !!incomingByContent &&
+                        (
+                        // If we don't have an id, our `hash` variable will already be the `hashByContent`, so we can reuse it
+                        (_c = incomingByContent === null || incomingByContent === void 0 ? void 0 : incomingByContent.get(hash)) === null || _c === void 0 ? void 0 : _c[0])));
                     if (match) {
                         // Defer to set to handle not nuking WIP changes
                         childState.set(match, opts);
                         mergedItems.push(childState.value);
-                        // Once matched, we don't this to be an addedRow anymore
+                        // Once matched, we don't want this to be an addedRow anymore
                         addedRows.delete(currentItem);
                     }
-                    else if (!childState.dirty && !addedRows.has(currentItem)) {
+                    else if (!childState.dirty && !childState.isNewEntity && !addedRows.has(currentItem)) {
                         // Local is not dirty/added, and it's not upstream, so let it get removed
                     }
                     else if (hasOpKey && currentItem.op === "delete") {
@@ -243,7 +259,7 @@ parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeA
                 // Then, add any incoming items that don't exist in current
                 for (const incomingItem of incomingItems) {
                     // Look for both `incoming.id` and the incoming-sans-id for new entities
-                    const match = ((_d = currentById.get(hashItem(incomingItem))) === null || _d === void 0 ? void 0 : _d[0]) || ((_e = currentById.get(hashWithoutId(incomingItem))) === null || _e === void 0 ? void 0 : _e[0]);
+                    const match = ((_d = currentById.get(hashById(incomingItem))) === null || _d === void 0 ? void 0 : _d[0]) || ((_e = currentById.get(hashByContent(incomingItem))) === null || _e === void 0 ? void 0 : _e[0]);
                     if (!match) {
                         // New item from server, add it
                         const childState = getOrCreateChildState(incomingItem, opts);

package/dist/fields/valueField.js

@@ -114,12 +114,18 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
             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;
+                const acceptServerAck = hasInflightChangedValue &&
+                    this.value === lastChangedValue &&
+                    // If value === originalValue, this is likely a cache refresh firing in-between "we put the new value
+                    // on the wire" and "the server acked our change". Granted, this heuristic means that if the server
+                    // really does reject/rollback our change, we'll ignore it, but atm we don't have a way of differentiating
+                    // "this refresh is from a pre-response cache refresh" vs. "post-response cache refresh".
+                    value !== this.originalValue;
                 // 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.
+                //   server received our value, but wanted to change it.
                 const keepLocalWipChange = this.value !== value && !isAckingUnset && !acceptServerAck;
                 if (keepLocalWipChange)
                     return;

package/dist/formState.test.js

@@ -279,6 +279,77 @@ describe("formState", () => {
         // And we're not dirty
         expect(state.books.dirty).toBe(false);
     });
+    it("list value can refresh and merge grand children that were added", () => {
+        // Given a list field that is currently populated with 1 child w/1 grandchild
+        const a1 = {
+            id: "a:1",
+            books: [{ id: "b:1", title: "b1", reviews: [{ id: "r:1", rating: 5 }] }],
+        };
+        const config = configBuilders_1.f.config({
+            id: configBuilders_1.f.value(),
+            books: configBuilders_1.f.list({
+                id: configBuilders_1.f.value(),
+                title: configBuilders_1.f.value().req(),
+                reviews: configBuilders_1.f.list({ id: configBuilders_1.f.value(), rating: configBuilders_1.f.value().req() }),
+            }),
+        });
+        const state = (0, objectField_1.createObjectState)(config, a1);
+        // When we add a new book with two ratings
+        state.books.add({ title: "b2", reviews: [{ rating: 4 }, { rating: 3 }] });
+        // When we refresh but only the 1st review grandchild existed when we auto-saved
+        state.set({
+            books: [
+                { id: "b:1", title: "b1" },
+                {
+                    id: "b:2",
+                    title: "b2",
+                    reviews: [{ id: "r:2", rating: 4 }],
+                },
+            ],
+        }, { refreshing: true });
+        // Then we still have two books
+        expect(state.books.value).toEqual([
+            {
+                id: "b:1",
+                title: "b1",
+                reviews: [{ id: "r:1", rating: 5 }],
+            },
+            {
+                id: "b:2",
+                title: "b2",
+                // And we stitched together the ack-d 1st review (now with an id assigned) and the 2nd WIP review
+                reviews: [{ id: "r:2", rating: 4 }, { rating: 3 }],
+            },
+        ]);
+        // And we're still dirty
+        expect(state.books.dirty).toBe(true);
+        expect(state.books.rows[0].dirty).toBe(false);
+        expect(state.books.rows[1].dirty).toBe(true);
+        expect(state.books.rows[1].reviews.rows[0].dirty).toBe(false);
+        expect(state.books.rows[1].reviews.rows[1].dirty).toBe(false);
+        expect(state.books.rows[1].reviews.dirty).toBe(true);
+        // Until the 2nd auto-save completes
+        state.set({
+            books: [
+                { id: "b:1", title: "b1" },
+                {
+                    id: "b:2",
+                    title: "b2",
+                    reviews: [
+                        { id: "r:2", rating: 4 },
+                        { id: "r:3", rating: 3 },
+                    ],
+                },
+            ],
+        }, { refreshing: true });
+        // Then we stitch together the 2nd review as well
+        expect(state.books.value).toMatchObject([
+            { id: "b:1" },
+            { id: "b:2", reviews: [{ id: "r:2" }, { id: "r:3", rating: 3 }] },
+        ]);
+        // And we're no longer dirty
+        expect(state.books.dirty).toBe(false);
+    });
     it("list value can observe changes", () => {
         const b1 = { title: "t1" };
         const a1 = { firstName: "a1", books: [b1] };
@@ -1592,6 +1663,18 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("FF");
         expect(formState.firstName.dirty).toEqual(false);
     });
+    it("ignores cache refresh of our original value", () => {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { id: "a:1", firstName: "f" });
+        // Given first name has wip edits
+        formState.firstName.set("ff");
+        // And we've called changedValue to put it on the wire
+        expect(formState.changedValue).toEqual({ id: "a:1", firstName: "ff" });
+        // But then a cache refresh fires with our original `f`
+        formState.set({ firstName: "f" }, { refreshing: true });
+        // Then we keep our WIP value
+        expect(formState.firstName.value).toEqual("ff");
+        expect(formState.firstName.dirty).toEqual(true);
+    });
     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

package/dist/formStateDomain.d.ts

@@ -29,6 +29,11 @@ export interface BookInput {
     delete?: boolean | null | undefined;
     isPublished?: boolean;
     op?: "include" | "delete" | "remove";
+    reviews?: ReviewInput[];
+}
+export interface ReviewInput {
+    id?: string | null | undefined;
+    rating?: number | null | undefined;
 }
 export interface DeweyDecimalClassification {
     number: string;

package/dist/useFormState.test.js

@@ -146,11 +146,18 @@ describe("useFormState", () => {
             };
             const data2 = {
                 id: "a:1",
-                firstName: "f2",
+                firstName: "f2", // we'll have a local WIP change
                 lastName: "l2",
-                address: { id: "address:1", street: "s2", city: "c2" },
+                address: {
+                    id: "address:1",
+                    street: "s2", // we'll have a local WIP change
+                    city: "c2",
+                },
                 books: [
-                    { id: "b:1", title: "a2" },
+                    {
+                        id: "b:1",
+                        title: "a2", // we'll have a local WIP change
+                    },
                     { id: "b:2", title: "b2" },
                     { id: "b:3", title: "b3" },
                 ],

package/package.json

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