@homebound/form-state 2.27.2 → 2.28.0

package/dist/config.d.ts

@@ -28,6 +28,8 @@ export type ValueFieldConfig<V> = {
     isDeleteKey?: boolean;
     /** If true, the entity that contains this value will be treated as read only. */
     isReadOnlyKey?: boolean;
+    /** If true, we ignore field in dirty checks. */
+    isLocalOnly?: boolean;
     /**
      * Marks a field as being backed by a mobx class computed field.
      *

package/dist/configBuilders.d.ts

@@ -47,6 +47,8 @@ export declare class ValueFieldConfigBuilder<V> {
     req(): this;
     /** Marks the field as read only. */
     readOnly(): this;
+    /** Marks the field as local only. */
+    localOnly(): this;
     /** Appends `rules` to the field's validation rules. */
     rules(rules: Rule<V | null | undefined>[]): this;
     /** Marks the field as computed. */

package/dist/configBuilders.js

@@ -63,6 +63,11 @@ class ValueFieldConfigBuilder {
         this.config.readOnly = true;
         return this;
     }
+    /** Marks the field as local only. */
+    localOnly() {
+        this.config.isLocalOnly = true;
+        return this;
+    }
     /** Appends `rules` to the field's validation rules. */
     rules(rules) {
         var _a;

package/dist/fields/fragmentField.js

@@ -16,6 +16,7 @@ function newFragmentField(parentInstance, key) {
         _isIdKey: false,
         _isDeleteKey: false,
         _isReadOnlyKey: false,
+        _isLocalOnly: false,
         touched: false,
         valid: true,
         readOnly: true,

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/objectField.js

@@ -50,7 +50,7 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
                 // Default the id key to "id" unless some other field has isIdKey set
                 (key === "id" &&
                     !("isIdKey" in config) && // Allow setting `isIdKey=false`
-                    !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey)), config.isDeleteKey || false, config.isReadOnlyKey || false, (_a = config.computed) !== null && _a !== void 0 ? _a : 
+                    !Object.entries(objectConfig).some(([other, c]) => other !== key && c.isIdKey)), config.isDeleteKey || false, config.isReadOnlyKey || false, config.isLocalOnly || false, (_a = config.computed) !== null && _a !== void 0 ? _a : 
             // If instance is a mobx class, we can detect computeds as they won't be enumerable
             ((0, mobx_1.isObservable)(instance) ? !(key in originalCopy) : false), (_b = config.readOnly) !== null && _b !== void 0 ? _b : false, (_c = config.strictOrder) !== null && _c !== void 0 ? _c : true, maybeAutoSave);
         }
@@ -138,7 +138,7 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
             return getFields(this).flatMap((f) => f.errors.map((e) => `${f.key}: ${e}`));
         },
         get dirty() {
-            return (getFields(this).some((f) => f.dirty) ||
+            return (getFields(this).some((f) => f.dirty && !f._isLocalOnly) ||
                 // `isUnset` checks if our `parent[key] === undefined`, which can mean "surely we're dirty",
                 // but as long as we've got some keys actually set
                 (this.isUnset() && !(0, utils_1.areEqual)(this.value, {})));
@@ -212,6 +212,9 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
                 // References only include the id key below
                 if (config.reference)
                     return;
+                // Ignore local-only fields
+                if (f._isLocalOnly)
+                    return;
                 if (f.dirty ||
                     // If the caller used useFormState.ifUndefined to provide some default values, then those keys may not
                     // look dirty, but if we're new we should include them anyway.

package/dist/fields/valueField.d.ts

@@ -70,5 +70,6 @@ export interface FieldStateInternal<T, V> extends FieldState<V> {
     _isIdKey: boolean;
     _isDeleteKey: boolean;
     _isReadOnlyKey: boolean;
+    _isLocalOnly: boolean;
 }
-export declare function newValueFieldState<T, K extends keyof T>(parentCopy: T, parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;
+export declare function newValueFieldState<T, K extends keyof T>(parentCopy: T, parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, isLocalOnly: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;

package/dist/fields/valueField.js

@@ -6,7 +6,7 @@ const mobx_1 = require("mobx");
 const proxies_1 = require("../proxies");
 const rules_1 = require("../rules");
 const utils_1 = require("../utils");
-function newValueFieldState(parentCopy, parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, computed, readOnly, strictOrder, maybeAutoSave) {
+function newValueFieldState(parentCopy, parentInstance, parentState, key, rules, isIdKey, isDeleteKey, isReadOnlyKey, isLocalOnly, computed, readOnly, strictOrder, maybeAutoSave) {
     // Because we read/write the value directly back into parentInstance[key],
     // which itself is not a proxy, we use this as our "value changed" trigger.
     const _tick = (0, mobx_1.observable)({ value: 1 });
@@ -31,6 +31,7 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
         _isReadOnlyKey: isReadOnlyKey,
+        _isLocalOnly: isLocalOnly,
         rules,
         get value() {
             // If we're wrapping a mobx store, then we'll get reactivity from parentInstance[key]

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] };
@@ -569,6 +640,33 @@ describe("formState", () => {
         a1.books.remove(0);
         expect(a1.dirty).toBeFalsy();
     });
+    it("can ignore isLocalOnly fields as not dirty", () => {
+        // Given we have an `isPublished` field that is marked as local only
+        const config = {
+            id: { type: "value" },
+            books: {
+                type: "list",
+                config: {
+                    id: { type: "value" },
+                    isPublished: { type: "value", isLocalOnly: true },
+                },
+            },
+        };
+        // And it starts out true
+        const a1 = (0, objectField_1.createObjectState)(config, {
+            id: "a:1",
+            books: [{ id: "b:1", isPublished: true }],
+        });
+        // When we change the value to false
+        a1.books.rows[0].isPublished.value = false;
+        // Then the field itself is dirty
+        expect(a1.books.rows[0].isPublished.dirty).toBe(true);
+        // But object is not
+        expect(a1.dirty).toBe(false);
+        expect(a1.books.dirty).toBe(false);
+        // And we don't include it in changedValue
+        expect(a1.changedValue).toEqual({ id: "a:1" });
+    });
     it("handles list fields with duplicate ids", () => {
         // Given an author that incorrectly has duplicate books
         const a1 = createAuthorInputState({

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