@homebound/form-state 2.26.9 → 2.26.11

package/dist/fields/listField.js

@@ -1,14 +1,23 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.newListFieldState = newListFieldState;
 const mobx_1 = require("mobx");
 const objectField_1 = require("./objectField");
 const rules_1 = require("../rules");
 const utils_1 = require("../utils");
-function newListFieldState(parentCopy, parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
+const object_hash_1 = __importDefault(require("object-hash"));
+function newListFieldState(
+// parentCopy is objectField's deepClone-d `originalCopy` that it/we use for `dirty` checking
+parentCopy, 
+// parentInstance is objectField's `instance`, that we're currently mutating
+parentInstance, parentState, key, rules, listConfig, config, strictOrder, maybeAutoSave) {
     var _a;
-    // Keep a map of "item in the parent list" -> "that item's ObjectState"
+    // Keep a map of "item in the parentInstance list" -> "that item's ObjectState"
     const rowMap = new Map();
+    const addedRows = new Set();
     const _tick = (0, mobx_1.observable)({ value: 1 });
     const _originalValueTick = (0, mobx_1.observable)({ value: 1 });
     const _childTick = (0, mobx_1.observable)({ value: 1 });
@@ -165,6 +174,7 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
             maybeAutoSave();
         },
         set(values, opts = {}) {
+            var _a, _b, _c, _d, _e;
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
                 throw new Error(`${String(key)} is currently readOnly`);
             }
@@ -173,19 +183,89 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
             // 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.
-            parentInstance[key] = (values !== null && values !== void 0 ? values : []).map((child) => getOrCreateChildState(child, opts).value);
-            // Make sure to tick first so that `setOriginalValue` sees the latest `rows`
-            _tick.value++;
-            // Reset originalCopy so that our dirty checks have the right # of rows.
-            if (opts.refreshing) {
-                this.setOriginalValue();
+            if (this.dirty && opts.refreshing) {
+                // When refreshing a dirty list, we need to preserve WIP values
+                // Start with current list, then merge in incoming changes
+                //
+                // These will all be POJOs, where `currentItems` existing in our `parentInstance`, and
+                // `incomingItems` could really be any of:
+                // - an instance from `parentInstance[key]` that user code is passing back in
+                // - an instance from `parentCopy[key]` that a cache refresh is passing in
+                // - a new instance, either from a cache refresh or user code, that we haven't seen yet
+                const currentItems = this.value || [];
+                const incomingItems = values || [];
+                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);
+                // 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);
+                // 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])));
+                    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
+                        addedRows.delete(currentItem);
+                    }
+                    else if (childState.dirty || addedRows.has(currentItem)) {
+                        // If no incoming, but we're dirty (...and not deleted), keep the WIP change
+                        if (hasOpKey && currentItem.op === "delete") {
+                            // delete
+                        }
+                        else {
+                            mergedItems.push(currentItem);
+                        }
+                    }
+                    else {
+                        // Local is not dirty, and it's not upstream, so remove it
+                    }
+                }
+                // 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]);
+                    if (!match) {
+                        // New item from server, add it
+                        const childState = getOrCreateChildState(incomingItem, opts);
+                        mergedItems.push(childState.value);
+                    }
+                }
+                parentInstance[key] = mergedItems;
+                _tick.value++;
+                // Set original to not merged...
+                this.setOriginalValue(incomingItems);
+            }
+            else {
+                parentInstance[key] = (values !== null && values !== void 0 ? values : []).map((child) => getOrCreateChildState(child, opts).value);
+                _tick.value++;
+                // Reset originalCopy so that our dirty checks have the right # of rows.
+                if (opts.refreshing) {
+                    this.setOriginalValue();
+                }
             }
         },
         add(value, spliceIndex) {
             // This is called by the user, so value should be a non-proxy value we should keep
             const childState = getOrCreateChildState(value);
-            // const childState = createObjectState(config, value, { maybeAutoSave }) as ObjectStateInternal<U>;
             rowMap.set(value, childState);
+            // Let `.set` know this is a new row
+            addedRows.add(value);
             this.ensureSet();
             this.value.splice(typeof spliceIndex === "number" ? spliceIndex : this.value.length, 0, childState.value);
             _tick.value++;
@@ -223,9 +303,9 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
             return value !== null && value !== void 0 ? value : [];
         },
         // This should only be called when value === originalValue
-        setOriginalValue() {
+        setOriginalValue(incomingItems) {
             // Use the rows' originalValues to update the parentCopy
-            parentCopy[key] = this.rows.map((r) => r.originalValue);
+            parentCopy[key] = incomingItems !== null && incomingItems !== void 0 ? incomingItems : this.rows.map((r) => r.originalValue);
             parentCopy[key].forEach((copy, i) => {
                 copyMap.set(copy, parentInstance[key][i]);
             });

package/dist/fields/objectField.d.ts

@@ -34,9 +34,10 @@ export type ObjectState<T> = FieldStates<T> & FieldState<T> & {
     /** Returns whether the object can be saved, i.e. is valid, but also as a side-effect marks touched. */
     canSave(): boolean;
 };
-export type ObjectStateInternal<T> = ObjectState<T> & {
+export type ObjectStateInternal<T = unknown> = ObjectState<T> & {
     set(value: T, opts?: InternalSetOpts): void;
     isSameEntity(other: T): boolean;
+    idKey: string | undefined;
 };
 declare const fragmentSym: unique symbol;
 export type Fragment<V> = V & {

package/dist/fields/objectField.js

@@ -49,6 +49,7 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
             field = (0, valueField_1.newValueFieldState)(originalCopy, instance, getObjectState, key, config.rules || [], config.isIdKey ||
                 // 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 : 
             // 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);
@@ -250,6 +251,10 @@ function newObjectState(config, parentState, parentInstance, parentListState, in
         isUnset() {
             return !!parentInstance && parentInstance[key] === undefined;
         },
+        get idKey() {
+            var _a;
+            return (_a = getFields(this).find((f) => f._isIdKey)) === null || _a === void 0 ? void 0 : _a.key;
+        },
     };
     proxy = (0, mobx_1.makeAutoObservable)(obj, {
         // Use custom equality on `value` that is _never_ equals. This sounds weird, but

package/dist/formState.test.js

@@ -165,6 +165,99 @@ describe("formState", () => {
         expect(state.books.dirty).toBe(false);
         expect(state.books.originalValue).toEqual([]);
     });
+    it("list value can refresh and not drop new children w/id", () => {
+        // Given a list field that is currently []
+        const a1 = { firstName: "a1", books: [] };
+        const state = createAuthorInputState(a1);
+        // And we add a new child on the client-side
+        state.books.add({ id: "b:1", title: "b1" });
+        // When we refresh it with the original list undefined
+        state.set({ books: [] }, { refreshing: true });
+        // Then it keeps the new child (and it somehow already has the id set)
+        expect(state.books.value).toEqual([{ id: "b:1", title: "b1" }]);
+        // And it's still considered changed
+        expect(state.books.dirty).toBe(true);
+        expect(state.books.originalValue).toEqual([]);
+        // And later when we refresh with the value acked from the server
+        state.set({ books: [{ id: "b:1", title: "b1", isPublished: true }] }, { refreshing: true });
+        // Then we have only 1 value
+        expect(state.books.value).toEqual([{ id: "b:1", title: "b1", isPublished: true }]);
+        // And we're not longer dirty
+        expect(state.books.dirty).toBe(false);
+    });
+    it("list value can refresh and not drop new children w/o an id", () => {
+        // Given a list field that is currently []
+        const a1 = { firstName: "a1", books: [] };
+        const state = createAuthorInputState(a1);
+        // And we add a new child on the client-side (and it doesn't have an id)
+        state.books.add({ title: "b1" });
+        // When we refresh it with the original list undefined
+        state.set({ books: [] }, { refreshing: true });
+        // Then it keeps the new child
+        expect(state.books.value).toEqual([{ title: "b1" }]);
+        // And it's still considered changed
+        expect(state.books.dirty).toBe(true);
+        expect(state.books.originalValue).toEqual([]);
+        // And later when we refresh with the value acked from the server
+        state.set({ books: [{ id: "b:1", title: "b1" }] }, { refreshing: true });
+        // Then we have only 1 value
+        expect(state.books.value).toEqual([{ id: "b:1", title: "b1" }]);
+        // And we're not longer dirty
+        expect(state.books.dirty).toBe(false);
+    });
+    it("list value can refresh and not drop new children that are just data", () => {
+        const config = configBuilders_1.f.config({
+            firstName: configBuilders_1.f.value(),
+            tags: configBuilders_1.f.list({ combo: configBuilders_1.f.value() }),
+        });
+        const state = (0, objectField_1.createObjectState)(config, { firstName: "a1", tags: [] });
+        // And we add a new child on the client-side (and it doesn't have an id)
+        state.tags.add({ combo: ["b1", "b2"] });
+        // When we refresh it with the original list undefined
+        state.set({ tags: [] }, { refreshing: true });
+        // Then it keeps the new child
+        expect(state.tags.value).toEqual([{ combo: ["b1", "b2"] }]);
+        // And it's still considered changed
+        expect(state.tags.dirty).toBe(true);
+        expect(state.tags.originalValue).toEqual([]);
+        // And we add an additional child
+        state.tags.add({ combo: ["c1", "c2"] });
+        // And a refresh brings back the 1st child acked from the server
+        state.set({ tags: [{ combo: ["b1", "b2"] }] }, { refreshing: true });
+        // Then we still have 2 children
+        expect(state.tags.value).toEqual([{ combo: ["b1", "b2"] }, { combo: ["c1", "c2"] }]);
+        // And we're still dirty
+        expect(state.tags.dirty).toBe(true);
+        // When the server finally acks both children
+        state.set({ tags: [{ combo: ["b1", "b2"] }, { combo: ["c1", "c2"] }] }, { refreshing: true });
+        // Then we're finally clean
+        expect(state.tags.dirty).toBe(false);
+    });
+    it("list value can refresh and drop children that were deleted", () => {
+        // Given a list field that is currently populated
+        const a1 = {
+            id: "a:1",
+            firstName: "a1",
+            books: [
+                { id: "b:1", title: "b1", op: "include" },
+                { id: "b:2", title: "b2", op: "include" },
+            ],
+        };
+        // And incremental deletion is enabled
+        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(), op: configBuilders_1.f.value() }),
+        });
+        const state = (0, objectField_1.createObjectState)(config, a1);
+        // When we delete the 1st book
+        state.books.rows[0].op.set("delete");
+        // When we refresh it only the 2nd book
+        state.set({ books: [{ id: "b:2", title: "b2" }] }, { refreshing: true });
+        // Then we only have 1 book
+        expect(state.books.value).toEqual([{ id: "b:2", title: "b2", op: "include" }]);
+        // And we're not dirty
+        expect(state.books.dirty).toBe(false);
+    });
     it("list value can observe changes", () => {
         const b1 = { title: "t1" };
         const a1 = { firstName: "a1", books: [b1] };
@@ -1743,6 +1836,7 @@ const authorWithBooksConfig = configBuilders_1.f.config({
         id: configBuilders_1.f.value(),
         title: configBuilders_1.f.value().req(),
         classification: configBuilders_1.f.value(),
+        isPublished: configBuilders_1.f.value(),
     }),
 });
 function createAuthorInputState(input, maybeAutoSave) {

package/dist/useFormState.test.js

@@ -218,7 +218,7 @@ describe("useFormState", () => {
             id: "a:1",
         });
     });
-    it("useFormState can accept new data while read only", async () => {
+    it("can accept new data while read only", async () => {
         // Given a component
         function TestComponent() {
             const config = authorWithAddressAndBooksConfig;
@@ -255,7 +255,7 @@ describe("useFormState", () => {
         expect(r.street.textContent).toEqual("s2");
         expect(r.title1.textContent).toEqual("a2");
     });
-    it("useFormState can accept new data with computed fields", async () => {
+    it("can accept new data with computed fields", async () => {
         // Given a component
         // And it's using a class/mobx proxy as the basis for the data
         class AuthorRow {
@@ -356,6 +356,44 @@ describe("useFormState", () => {
         // Then we auto save again
         expect(autoSave).toBeCalledTimes(2);
     });
+    it("can revert to last-saved-state after a failed auto save", async () => {
+        // Given a component
+        function TestComponent() {
+            // And the firstName is initially "f1"
+            const [data, setData] = (0, react_2.useState)({ firstName: "f1" });
+            const query = (0, react_2.useMemo)(() => {
+                return { data, loading: false, error: undefined };
+            }, [data]);
+            const form = (0, useFormState_1.useFormState)({
+                config: authorConfig,
+                init: { query, map: (d) => d },
+                async autoSave(fs) {
+                    // If the user types "f2", we'll pretend the backend accepted the update, and acks it in the mutation response
+                    if (fs.firstName.value === "f2") {
+                        await new Promise((resolve) => setTimeout(resolve, 1));
+                        setData(fs.value);
+                    }
+                    else {
+                        // If the user types anything else, pretend the backend rejected it, and revert
+                        await new Promise((resolve) => setTimeout(resolve, 1));
+                        fs.revertChanges();
+                    }
+                },
+            });
+            return ((0, jsx_runtime_1.jsx)(mobx_react_1.Observer, { children: () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { "data-testid": "firstNameOriginal", children: form.firstName.originalValue }), (0, jsx_runtime_1.jsx)(FormStateApp_1.TextField, { field: form.firstName }), ";"] })) }));
+        }
+        // So we start out with f1
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName).toHaveValue("f1");
+        // When we type f2, it should be accepted & stay
+        await (0, rtl_utils_1.typeAndWait)(r.firstName, "f2");
+        expect(r.firstName).toHaveValue("f2");
+        expect(r.firstNameOriginal).toHaveTextContent("f2");
+        // But if we type f3, we want it reverted, back to f2 (the last good value)
+        await (0, rtl_utils_1.typeAndWait)(r.firstName, "f3");
+        expect(r.firstName).toHaveValue("f2");
+        expect(r.firstNameOriginal).toHaveTextContent("f2");
+    });
     it("returns empty lists even when inputs are undefined", async () => {
         const autoSave = jest.fn();
         // Given a component

package/dist/utils.d.ts

@@ -46,3 +46,4 @@ export declare function hasToJSON(o?: unknown): o is {
 };
 /** Make a clone of `obj`, but only recurse into POJOs and Arrays...and stores. */
 export declare function deepClone<T>(obj: T, map?: WeakMap<WeakKey, any>): T;
+export declare function groupBy<T, Y = T, K = string>(list: readonly T[], fn: (x: T) => K, valueFn?: (x: T) => Y): Map<K, Y[]>;

package/dist/utils.js

@@ -11,6 +11,7 @@ exports.isEmpty = isEmpty;
 exports.areEqual = areEqual;
 exports.hasToJSON = hasToJSON;
 exports.deepClone = deepClone;
+exports.groupBy = groupBy;
 const is_plain_object_1 = require("is-plain-object");
 const mobx_1 = require("mobx");
 const deepEquals_1 = require("./fields/deepEquals");
@@ -144,6 +145,17 @@ function deepClone(obj, map = new WeakMap()) {
         return obj;
     }
 }
+function groupBy(list, fn, valueFn) {
+    const result = new Map();
+    list.forEach((o) => {
+        const group = fn(o);
+        if (!result.has(group)) {
+            result.set(group, []);
+        }
+        result.get(group).push(valueFn === undefined ? o : valueFn(o));
+    });
+    return result;
+}
 /** Returns all property names, including mobx computeds (non-enumerable) & inherited. */
 function getAllPropertyNames(obj) {
     const proto = Object.getPrototypeOf(obj);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.26.9",
+  "version": "2.26.11",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,9 @@
     "src/**/*.{ts,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
-    "is-plain-object": "^5.0.0"
+    "@types/object-hash": "^3.0.6",
+    "is-plain-object": "^5.0.0",
+    "object-hash": "^3.0.0"
   },
   "peerDependencies": {
     "mobx": ">=6",