@homebound/form-state 2.22.1 → 2.22.3

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

@@ -163,6 +163,8 @@ function newObjectState(config, parentState, parentListState, instance, key, may
         get changedValue() {
             const result = {};
             getFields(this).forEach((f) => {
+                if (f._computed)
+                    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.
@@ -188,12 +190,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/fields/valueField.js

@@ -18,6 +18,8 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         _readOnly: readOnly || false,
         _loading: false,
         _focused: false,
+        // Expose so computed can be skipped in changedValue
+        _computed: computed,
         _isIdKey: isIdKey,
         _isDeleteKey: isDeleteKey,
         _isReadOnlyKey: isReadOnlyKey,
@@ -54,6 +56,12 @@ function newValueFieldState(parentCopy, parentInstance, parentState, key, rules,
         },
         // For primitive fields, the changed value is just the value.
         get changedValue() {
+            // Usually if we see a field being unset, we set `parent[key] = null`, but if we're wrapping
+            // a mobx observable object, it might have changed to `undefined` without us being able to
+            // tell it to be `null` (and potentially break the type contract of `string | undefined`).
+            // So detect un-set-ness here and return `null`.
+            if (this.value === undefined && this.originalValue !== undefined)
+                return null;
             return this.value;
         },
         get valid() {

package/dist/formState.test.js

@@ -979,11 +979,7 @@ describe("formState", () => {
     it("can observe observable objects being mutated directly", () => {
         // Given a mobx class with a computed
         const instance = new ObservableObject();
-        const formState = (0, objectField_1.createObjectState)({
-            firstName: { type: "value" },
-            lastName: { type: "value" },
-            fullName: { type: "value", computed: true },
-        }, instance);
+        const formState = (0, objectField_1.createObjectState)(authorWithFullName, instance);
         expect(formState.firstName.value).toEqual("first");
         expect(formState.fullName.value).toEqual("first last");
         // And we hook up reactivity to the computed
@@ -999,9 +995,11 @@ describe("formState", () => {
         expect(formState.fullName.value).toEqual("change last");
         // And when the underlying mobx class has a field unset
         instance.firstName = undefined;
-        // Then our fomr-state computed re-runs again
+        // Then our form-state computed re-runs again
         expect(numCalcs).toBe(3);
         expect(formState.fullName.value).toEqual("undefined last");
+        // And knows the field should be sent as null
+        expect(formState.changedValue).toEqual({ firstName: null });
     });
     it("can set computeds that have setters", () => {
         const formState = (0, objectField_1.createObjectState)({
@@ -1086,6 +1084,18 @@ describe("formState", () => {
         // because this might trigger creating a throw-away entity
         expect(formState.changedValue).toEqual({ firstName: "f" });
     });
+    it("changedValue skips computeds", () => {
+        // Given a new author that calls full name
+        const formState = (0, objectField_1.createObjectState)(authorWithFullName, new ObservableObject());
+        expect(formState.fullName.value).toEqual("first last");
+        // When the firstName changes
+        formState.firstName.value = "First";
+        // Then the fullName changes
+        expect(formState.fullName.value).toBe("First last");
+        expect(formState.fullName.dirty).toBe(true);
+        // And we don't include it in the changedValue
+        expect(formState.changedValue).toEqual({ firstName: "First" });
+    });
     it("can return only changed list fields", () => {
         // Given an author with some books
         const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
@@ -1526,6 +1536,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() {
@@ -1560,6 +1589,11 @@ const authorWithBooksConfig = configBuilders_1.f.config({
 function createAuthorInputState(input, maybeAutoSave) {
     return (0, objectField_1.createObjectState)(authorWithBooksConfig, input, { maybeAutoSave });
 }
+const authorWithFullName = {
+    firstName: { type: "value" },
+    lastName: { type: "value" },
+    fullName: { type: "value", computed: true },
+};
 const authorWithAddressConfig = {
     id: { type: "value" },
     firstName: { type: "value" },

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/package.json

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