@homebound/form-state 2.27.2 → 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/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] };

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.2",
+  "version": "2.27.3",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",