@homebound/form-state 2.22.0 → 2.22.2

package/dist/fields/listField.js

@@ -19,6 +19,31 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
     ((_a = parentCopy[key]) !== null && _a !== void 0 ? _a : []).forEach((copy, i) => {
         copyMap.set(copy, parentInstance[key][i]);
     });
+    // Given a child POJO (or a copy/clone of a child POJO), return its ObjectState wrapper.
+    function getOrCreateChildState(child, opts) {
+        let childState = rowMap.get(child);
+        // If we're being reverted to our originalValue, i.e. values is actually
+        // a list of copies, use the copyMap to recover the non-copy original value
+        if (!childState && copyMap.has(child)) {
+            childState = rowMap.get(copyMap.get(child));
+        }
+        // Look for an existing child (requires having an id key configured)
+        if (!childState) {
+            for (const [, otherState] of rowMap.entries()) {
+                if (otherState.isSameEntity(child)) {
+                    otherState.set(child, opts);
+                    rowMap.set(child, otherState);
+                    return otherState;
+                }
+            }
+        }
+        // If we didn't have an existing child, just make a new object state
+        if (!childState) {
+            childState = (0, objectField_1.newObjectState)(config, parentState, list, child, undefined, maybeAutoSave);
+            rowMap.set(child, childState);
+        }
+        return childState;
+    }
     const list = {
         key: key,
         // Our fundamental state of wrapped Us
@@ -75,15 +100,7 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
                 (0, utils_1.fail)();
             // Avoid using `this.value` to avoid registering `_childTick` as a dependency
             const value = parentInstance[key];
-            return (value || []).map((child) => {
-                // Because we're reading from this.value, child will be the proxy version
-                let childState = rowMap.get(child);
-                if (!childState) {
-                    childState = (0, objectField_1.newObjectState)(config, parentState, list, child, undefined, maybeAutoSave);
-                    rowMap.set(child, childState);
-                }
-                return childState;
-            });
+            return (value || []).map((child) => getOrCreateChildState(child));
         },
         // TODO Should this be true when all rows are touched?
         get touched() {
@@ -144,30 +161,12 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
             if (this.readOnly && !opts.resetting && !opts.refreshing) {
                 throw new Error(`${String(key)} is currently readOnly`);
             }
-            // We should be passed values that are non-proxies.
-            parentInstance[key] = values.map((value) => {
-                let childState = rowMap.get(value);
-                // If we're being reverted to our originalValue, i.e. values is actually
-                // a list of copies, use the copyMap to recover our child states
-                if (!childState && copyMap.has(value)) {
-                    childState = rowMap.get(copyMap.get(value));
-                }
-                if (!childState) {
-                    // Look for an existing child (requires having an id key configured)
-                    for (const [, otherState] of rowMap.entries()) {
-                        if (otherState.isSameEntity(value)) {
-                            otherState.set(value, opts);
-                            rowMap.set(value, otherState);
-                            return otherState.value;
-                        }
-                    }
-                    // If we didn't have an existing child, just make a new object state
-                    childState = (0, objectField_1.createObjectState)(config, value, { maybeAutoSave });
-                    rowMap.set(value, childState);
-                }
-                // Return the already-observable'd value so that our `parent.value[key] = values` doesn't re-proxy things
-                return childState.value;
-            });
+            // Given the values, see if we've got existing child states, and use their
+            // value if so. I.e. this covers revertChanges doing `set(originalValue)` and
+            // 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.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.

package/dist/fields/objectField.js

@@ -188,12 +188,12 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         // An internal helper method to see if `other` is for "the same entity" as our current row
         isSameEntity(other) {
             const idField = getFields(this).find((f) => f._isIdKey);
-            if (!idField) {
+            if (!idField)
                 return false;
-            }
-            // If the otherIdValue is undefined, it's a new entity so can't be the same as us
+            const ourIdValue = idField.value;
             const otherIdValue = other[idField.key];
-            return otherIdValue !== undefined && otherIdValue === this[idField.key].value;
+            // If the otherIdValue is undefined, it's a new entity so can't be the same as us
+            return otherIdValue !== undefined && otherIdValue === ourIdValue;
         },
     };
     proxy = (0, mobx_1.makeAutoObservable)(obj, {

package/dist/formState.test.js

@@ -965,12 +965,14 @@ describe("formState", () => {
         const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             lastName: { type: "value" },
-            fullName: { type: "value", computed: true },
+            fullName: { type: "value" },
         }, new ObservableObject());
         expect(formState.firstName.value).toEqual("first");
         expect(formState.fullName.value).toEqual("first last");
+        expect(formState.fullName.dirty).toEqual(false);
         formState.firstName.value = "change";
         expect(formState.fullName.value).toEqual("change last");
+        expect(formState.fullName.dirty).toEqual(true);
         formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
@@ -1524,6 +1526,25 @@ describe("formState", () => {
         expect(a.id._isIdKey).toBe(false);
         expect(a.otherId._isIdKey).toBe(true);
     });
+    it("uses id key to recognize same entities", () => {
+        // With b1 having an id
+        const b1 = (0, objectField_1.createObjectState)({ id: { type: "value" } }, { id: "b:1" });
+        expect(b1.isSameEntity({ id: "b:1" })).toBe(true);
+        expect(b1.isSameEntity({ id: "b:2" })).toBe(false);
+        expect(b1.isSameEntity({ id: undefined })).toBe(false);
+        expect(b1.isSameEntity({})).toBe(false);
+        // With b2 having no id
+        const b2 = (0, objectField_1.createObjectState)({ id: { type: "value" } }, {});
+        expect(b2.isSameEntity({ id: "b:1" })).toBe(false);
+        expect(b2.isSameEntity({ id: undefined })).toBe(false);
+        expect(b2.isSameEntity({})).toBe(false);
+        // With b3 having no id key
+        const b3 = (0, objectField_1.createObjectState)({ title: { type: "value" } }, { title: "b3" });
+        expect(b3.isSameEntity({ title: "b3" })).toBe(false);
+        // With b4 having a different id key
+        const b4 = (0, objectField_1.createObjectState)({ title: { type: "value", isIdKey: true } }, { title: "b4" });
+        expect(b4.isSameEntity({ title: "b4" })).toBe(true);
+    });
 });
 class ObservableObject {
     constructor() {

package/dist/index.d.ts

@@ -1,7 +1,8 @@
 export { ObjectConfig } from "./config";
 export { f } from "./configBuilders";
+export { FragmentField } from "./fields/fragmentField";
 export { ListFieldState } from "./fields/listField";
-export { ObjectState, createObjectState } from "./fields/objectField";
+export { Fragment, ObjectState, createObjectState, fragment } from "./fields/objectField";
 export { FieldState, ValueAdapter } from "./fields/valueField";
 export { Rule, required } from "./rules";
 export { useFormState } from "./useFormState";

package/dist/index.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useFormStates = exports.useFormState = exports.required = exports.createObjectState = exports.f = void 0;
+exports.useFormStates = exports.useFormState = exports.required = exports.fragment = exports.createObjectState = exports.f = void 0;
 var configBuilders_1 = require("./configBuilders");
 Object.defineProperty(exports, "f", { enumerable: true, get: function () { return configBuilders_1.f; } });
 var objectField_1 = require("./fields/objectField");
 Object.defineProperty(exports, "createObjectState", { enumerable: true, get: function () { return objectField_1.createObjectState; } });
+Object.defineProperty(exports, "fragment", { enumerable: true, get: function () { return objectField_1.fragment; } });
 var rules_1 = require("./rules");
 Object.defineProperty(exports, "required", { enumerable: true, get: function () { return rules_1.required; } });
 var useFormState_1 = require("./useFormState");

package/dist/useFormState.test.js

@@ -244,9 +244,11 @@ describe("useFormState", () => {
         // Given a component
         // And it's using a class/mobx proxy as the basis for the data
         class AuthorRow {
-            constructor(firstName, lastName) {
+            constructor(firstName, lastName, books) {
                 this.firstName = firstName;
                 this.lastName = lastName;
+                this.books = books;
+                (0, mobx_1.makeAutoObservable)(this);
             }
             get fullName() {
                 return this.firstName + " " + this.lastName;
@@ -254,27 +256,32 @@ describe("useFormState", () => {
         }
         function TestComponent() {
             // And we have two sets of data
-            const data1 = { firstName: "f1", lastName: "l1" };
-            const data2 = { firstName: "f2", lastName: "l2" };
+            const data1 = { firstName: "f1", lastName: "l1", books: [] };
+            const data2 = { firstName: "f2", lastName: "l2", books: [{ title: "t1" }] };
             // And we start out with data1
             const [data, setData] = (0, react_2.useState)(data1);
-            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName), [data]);
+            const author = (0, react_2.useMemo)(() => new AuthorRow(data.firstName, data.lastName, data.books), [data]);
             const config = (0, react_2.useMemo)(() => ({
                 firstName: { type: "value" },
                 lastName: { type: "value" },
                 fullName: { type: "value", computed: true },
+                books: { type: "list", config: { title: { type: "value" } } },
             }), []);
             const form = (0, useFormState_1.useFormState)({ config, init: { input: author, map: (a) => a } });
-            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": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => setData(data2) })] })) }));
+            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": "fullName", children: form.fullName.value }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksLength", children: form.books.rows.length }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "booksDirty", children: String(form.books.touched) }), (0, jsx_runtime_1.jsx)("button", { "data-testid": "refreshData", onClick: () => 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");
         expect(r.fullName.textContent).toEqual("f1 l1");
+        expect(r.booksLength.textContent).toEqual("0");
+        expect(r.booksDirty.textContent).toEqual("false");
         // When the new query is ran i.e. due to a cache refresh
         (0, rtl_utils_1.click)(r.refreshData);
         expect(r.firstName.textContent).toEqual("f2");
         expect(r.fullName.textContent).toEqual("f2 l2");
+        expect(r.booksLength.textContent).toEqual("1");
+        expect(r.booksDirty.textContent).toEqual("false");
     });
     it("can trigger auto save for fields in list that were initially undefined", async () => {
         const autoSave = jest.fn();

package/dist/utils.js

@@ -133,7 +133,7 @@ function deepClone(obj, map = new WeakMap()) {
             return map.get(obj);
         const result = Array.isArray(obj) ? [] : {};
         map.set(obj, result);
-        Object.assign(result, ...Object.keys(obj).map((key) => ({ [key]: deepClone(obj[key], map) })));
+        Object.assign(result, ...getAllPropertyNames(obj).map((key) => ({ [key]: deepClone(obj[key], map) })));
         return result;
     }
     else {
@@ -141,3 +141,10 @@ function deepClone(obj, map = new WeakMap()) {
     }
 }
 exports.deepClone = deepClone;
+/** Returns all property names, including mobx computeds (non-enumerable) & inherited. */
+function getAllPropertyNames(obj) {
+    const proto = Object.getPrototypeOf(obj);
+    // Don't crawl up into Object.prototype, or into arrays/observable arrays
+    const inherited = proto && proto !== Object.prototype && !Array.isArray(obj) ? getAllPropertyNames(proto) : [];
+    return [...new Set(Object.getOwnPropertyNames(obj).concat(inherited))];
+}

package/package.json

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