@homebound/form-state 2.22.0 → 2.22.1

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");
     });

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