@homebound/form-state 2.18.1 → 2.20.0

package/dist/formState.test.js

@@ -4,24 +4,61 @@ const mobx_1 = require("mobx");
 const objectField_1 = require("./fields/objectField");
 const formStateDomain_1 = require("./formStateDomain");
 const rules_1 = require("./rules");
-describe("formState", () => {
+describe("mobx behavior", () => {
+    it("mobx batches if in actions", () => {
+        const a = (0, mobx_1.observable)({ name: "a1" });
+        const b = (0, mobx_1.observable)({ name: "b1" });
+        const map = new mobx_1.ObservableMap();
+        map.set("a", a);
+        map.set("b", b);
+        let runs = 0;
+        (0, mobx_1.autorun)(() => {
+            noop([...map.values()].filter((v) => v.name.includes("1")));
+            runs++;
+        });
+        expect(runs).toBe(1);
+        // When we change both a and b
+        (0, mobx_1.runInAction)(() => {
+            a.name = "a11";
+            b.name = "b2";
+        });
+        // Then the reaction waited and only ran once
+        expect(runs).toBe(2);
+    });
+    it("mobx can watch undefined keys", () => {
+        const a = new ObservableObject();
+        const b = new ObservableObject();
+        const map = new mobx_1.ObservableMap();
+        map.set("a", a);
+        map.set("b", b);
+        let runs = 0;
+        (0, mobx_1.autorun)(() => {
+            noop([...map.values()].map((a) => a.age));
+            runs++;
+        });
+        expect(runs).toBe(1);
+        b.age = 1;
+        expect(runs).toBe(2);
+    });
     it("mobx lists maintain observable identity", () => {
         // given a parent observable
-        const a = mobx_1.observable({ list: [] });
+        const a = (0, mobx_1.observable)({ list: [] });
         // if we observable-ize a value being pushing it on the list
-        const c1 = mobx_1.observable({});
+        const c1 = (0, mobx_1.observable)({});
         a.list.push(c1);
         // then we get identify equality on the list lookups
         expect(a.list[0] === c1).toEqual(true);
     });
+});
+describe("formState", () => {
     it("can create a simple object", () => {
-        const a = objectField_1.createObjectState({ title: { type: "value", rules: [rules_1.required] } }, {});
+        const a = (0, objectField_1.createObjectState)({ title: { type: "value", rules: [rules_1.required] } }, {});
         expect(a.valid).toBeFalsy();
     });
     it("can validate a simple input", () => {
-        const a = objectField_1.createObjectState({ title: { type: "value", rules: [rules_1.required] } }, { title: "b1" });
+        const a = (0, objectField_1.createObjectState)({ title: { type: "value", rules: [rules_1.required] } }, { title: "b1" });
         let numErrors = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             numErrors = a.title.errors.length;
         });
         expect(a.valid).toBeTruthy();
@@ -33,7 +70,7 @@ describe("formState", () => {
         expect(a.errors).toEqual(["title: Required"]);
     });
     it("can tell what is required", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             title: { type: "value", rules: [rules_1.required] },
             isPublished: { type: "value" },
         }, {});
@@ -41,9 +78,9 @@ describe("formState", () => {
         expect(a.isPublished.required).toBeFalsy();
     });
     it("trims whitespace within the required rule", () => {
-        const a = objectField_1.createObjectState({ title: { type: "value", rules: [rules_1.required] } }, { title: "initial valid title" });
+        const a = (0, objectField_1.createObjectState)({ title: { type: "value", rules: [rules_1.required] } }, { title: "initial valid title" });
         let numErrors = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             numErrors = a.title.errors.length;
         });
         expect(a.valid).toBeTruthy();
@@ -56,16 +93,16 @@ describe("formState", () => {
         expect(a.errors).toEqual(["title: Required"]);
     });
     it("can set values", () => {
-        const a = objectField_1.createObjectState({ title: { type: "value" } }, { title: "b1" });
+        const a = (0, objectField_1.createObjectState)({ title: { type: "value" } }, { title: "b1" });
         expect(a.title.value).toEqual("b1");
     });
     it("can read values", () => {
-        const a = objectField_1.createObjectState({ title: { type: "value" } }, { title: "b1" });
+        const a = (0, objectField_1.createObjectState)({ title: { type: "value" } }, { title: "b1" });
         expect(a.value.title).toEqual("b1");
         expect(a.title.value).toEqual("b1");
     });
     it("can set dates", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             birthday: {
                 type: "value",
                 rules: [({ value }) => ((value === null || value === void 0 ? void 0 : value.getTime()) === formStateDomain_1.jan2.getTime() ? "cannot be born on jan2" : undefined)],
@@ -86,6 +123,35 @@ describe("formState", () => {
         const a = createAuthorWithAddressInputState({ address: { city: "b1" } });
         expect(a.address.city.value).toEqual("b1");
     });
+    it("can adapt values", () => {
+        // Given an author where `delete` is normally a boolean
+        const a = (0, objectField_1.createObjectState)({
+            delete: { type: "value" },
+        }, { delete: true });
+        const boolField = a.delete;
+        // But we adapt it to a string
+        const stringField = a.delete.adapt({
+            toValue: (b) => String(b),
+            fromValue: (s) => Boolean(s),
+        });
+        // Then we can read it as a string
+        expect(stringField.value).toEqual("true");
+        // And we can set it as a string
+        stringField.value = "";
+        expect(boolField.value).toBe(false);
+        // And the originalValue is maintained
+        expect(boolField.originalValue).toBe(true);
+        expect(stringField.originalValue).toBe("true");
+        // As well as the dirty.
+        expect(boolField.dirty).toBe(true);
+        expect(stringField.dirty).toBe(true);
+        // And reverting works
+        stringField.revertChanges();
+        expect(boolField.dirty).toBe(false);
+        expect(stringField.dirty).toBe(false);
+        expect(boolField.value).toBe(true);
+        expect(stringField.value).toBe("true");
+    });
     it("maintains object identity", () => {
         const a1 = { firstName: "a1" };
         const state = createAuthorInputState(a1);
@@ -113,7 +179,7 @@ describe("formState", () => {
         const state = createAuthorInputState(a1);
         let numBooks;
         let ticks = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             numBooks = state.books.rows.length;
             ticks++;
         });
@@ -135,7 +201,7 @@ describe("formState", () => {
         const state = createAuthorInputState(a1);
         let books;
         let ticks = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             books = state.books.value;
             ticks++;
         });
@@ -150,7 +216,7 @@ describe("formState", () => {
         };
         // And we initially have ids in the input
         const a1 = { id: "1", firstName: "a1", books: [{ id: "2", title: "t1" }] };
-        const state = objectField_1.createObjectState(config, a1);
+        const state = (0, objectField_1.createObjectState)(config, a1);
         // And we edit a few things
         state.firstName.set("a2");
         state.books.add({ title: "t2" });
@@ -168,7 +234,7 @@ describe("formState", () => {
         expect(a1.valid).toBeTruthy();
         let lastValid = undefined;
         let ticks = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             lastValid = a1.valid;
             ticks++;
         });
@@ -271,7 +337,7 @@ describe("formState", () => {
         const a1 = createAuthorInputState({ firstName: "a1", books: [] });
         let ticks = 0;
         let numErrors = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             numErrors = a1.books.errors.length;
             ticks++;
         });
@@ -287,7 +353,7 @@ describe("formState", () => {
         expect(numErrors).toEqual(0);
     });
     it("can validate across fields", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             firstName: { type: "value", rules: [] },
             lastName: { type: "value" },
         }, {});
@@ -304,7 +370,7 @@ describe("formState", () => {
     it("passes sanitized values to validation rules", () => {
         // Given a field with a validation rule
         const rule = jest.fn().mockReturnValue("Required");
-        const a = objectField_1.createObjectState({ firstName: { type: "value", rules: [rule] } }, {});
+        const a = (0, objectField_1.createObjectState)({ firstName: { type: "value", rules: [rule] } }, {});
         expect(rule).toHaveBeenCalledTimes(0);
         // When the field is set to empty string
         a.firstName.value = "";
@@ -321,7 +387,7 @@ describe("formState", () => {
     it("passes trimmed values to validation rules on maybeAutoSave", () => {
         // Given we have a required rule
         const rule = jest.fn().mockReturnValue("Required");
-        const a = objectField_1.createObjectState({ firstName: { type: "value", rules: [rule] } }, {});
+        const a = (0, objectField_1.createObjectState)({ firstName: { type: "value", rules: [rule] } }, {});
         expect(rule).toHaveBeenCalledTimes(0);
         // When the user initially sets an empty string value
         a.firstName.focus();
@@ -348,12 +414,12 @@ describe("formState", () => {
         });
     });
     it("simple value changes trigger observers", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             title: { type: "value", rules: [rules_1.required] },
         }, { title: "t2" });
         let lastTitle = undefined;
         let ticks = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             lastTitle = a.title.value;
             ticks++;
         });
@@ -466,7 +532,7 @@ describe("formState", () => {
         expect(maybeAutoSave).toBeCalledTimes(0);
     });
     it("knows list of primitives are dirty", () => {
-        const a1 = objectField_1.createObjectState({ favoriteColors: { type: "value" } }, {});
+        const a1 = (0, objectField_1.createObjectState)({ favoriteColors: { type: "value" } }, {});
         expect(a1.favoriteColors.dirty).toBeFalsy();
         a1.favoriteColors.set([formStateDomain_1.Color.Blue]);
         expect(a1.dirty).toBeTruthy();
@@ -477,7 +543,7 @@ describe("formState", () => {
         expect(a1.dirty).toBeFalsy();
     });
     it("knows list of primitives are dirty with initialized as empty list", () => {
-        const a1 = objectField_1.createObjectState({ favoriteColors: { type: "value" } }, { favoriteColors: [] });
+        const a1 = (0, objectField_1.createObjectState)({ favoriteColors: { type: "value" } }, { favoriteColors: [] });
         expect(a1.favoriteColors.dirty).toBeFalsy();
         a1.favoriteColors.set([formStateDomain_1.Color.Blue]);
         expect(a1.dirty).toBeTruthy();
@@ -489,7 +555,7 @@ describe("formState", () => {
     });
     it("can evaluate arrays to be equal even if order of options are different from original when strictOrder = false", () => {
         // Given an array field value where we define `strictOrder` as false
-        const a1 = objectField_1.createObjectState({ favoriteColors: { type: "value", strictOrder: false } }, { favoriteColors: [formStateDomain_1.Color.Red, formStateDomain_1.Color.Blue] });
+        const a1 = (0, objectField_1.createObjectState)({ favoriteColors: { type: "value", strictOrder: false } }, { favoriteColors: [formStateDomain_1.Color.Red, formStateDomain_1.Color.Blue] });
         expect(a1.favoriteColors.dirty).toBeFalsy();
         // When changing the order of the values
         a1.favoriteColors.set([formStateDomain_1.Color.Blue, formStateDomain_1.Color.Red]);
@@ -498,7 +564,7 @@ describe("formState", () => {
     });
     it("evaluates arrays to be equal based on order by default", () => {
         // Given an array field value
-        const a1 = objectField_1.createObjectState({ favoriteColors: { type: "value" } }, { favoriteColors: [formStateDomain_1.Color.Red, formStateDomain_1.Color.Blue] });
+        const a1 = (0, objectField_1.createObjectState)({ favoriteColors: { type: "value" } }, { favoriteColors: [formStateDomain_1.Color.Red, formStateDomain_1.Color.Blue] });
         expect(a1.favoriteColors.dirty).toBeFalsy();
         // When we change the order of the values
         a1.favoriteColors.set([formStateDomain_1.Color.Blue, formStateDomain_1.Color.Red]);
@@ -675,7 +741,7 @@ describe("formState", () => {
         expect(a1.value.firstName).toBeNull();
     });
     it("can map properties to other types", () => {
-        const a1 = objectField_1.createObjectState({
+        const a1 = (0, objectField_1.createObjectState)({
             person: { type: "value" },
         }, { person: { firstName: "a1", lastName: "b1" } });
         a1.person.set({ firstName: "a2", lastName: "b2" });
@@ -701,7 +767,7 @@ describe("formState", () => {
     });
     it("maintain field readOnly state when form is readOnly", () => {
         // Given a formState
-        const formState = objectField_1.createObjectState({ title: { type: "value", rules: [rules_1.required], readOnly: true } }, {});
+        const formState = (0, objectField_1.createObjectState)({ title: { type: "value", rules: [rules_1.required], readOnly: true } }, {});
         // Then expect form
         expect(formState.title.readOnly).toBeTruthy();
     });
@@ -776,7 +842,7 @@ describe("formState", () => {
         expect(a1.firstName.loading).toBeTruthy();
     });
     it("canSave returns dirty and touches", () => {
-        const a1 = objectField_1.createObjectState({
+        const a1 = (0, objectField_1.createObjectState)({
             firstName: { type: "value", rules: [rules_1.required] },
         }, {});
         expect(a1.firstName.touched).toBeFalsy();
@@ -784,7 +850,7 @@ describe("formState", () => {
         expect(a1.firstName.touched).toBeTruthy();
     });
     it("uses toJSON if available for dirty checks", () => {
-        const a1 = objectField_1.createObjectState({
+        const a1 = (0, objectField_1.createObjectState)({
             birthday: { type: "value" },
         }, { birthday: new formStateDomain_1.DateOnly(formStateDomain_1.jan1) });
         a1.birthday.set(new formStateDomain_1.DateOnly(formStateDomain_1.jan1));
@@ -799,7 +865,7 @@ describe("formState", () => {
         expect(a.valid).toBeTruthy();
     });
     it("can validate a list input", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             books: {
                 type: "list",
                 config: { title: { type: "value", rules: [rules_1.required] } },
@@ -807,7 +873,7 @@ describe("formState", () => {
             },
         }, {});
         let lastErrors = "";
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             lastErrors = a.books.errors.join(", ");
         });
         a.books.add({ title: "t1" });
@@ -816,7 +882,7 @@ describe("formState", () => {
         expect(lastErrors).toEqual("");
     });
     it("can ignore a deleted list entry", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             books: {
                 type: "list",
                 config: {
@@ -835,7 +901,7 @@ describe("formState", () => {
         expect(a.books.valid).toBeTruthy();
     });
     it("can treat a list entry as read-only", () => {
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             books: {
                 type: "list",
                 config: {
@@ -864,13 +930,13 @@ describe("formState", () => {
         a.address.city.value = "b1";
         expect(a.address.city.value).toEqual("b1");
         expect(a.address.value).toMatchInlineSnapshot(`
-      Object {
+      {
         "city": "b1",
       }
     `);
         expect(a.value).toMatchInlineSnapshot(`
-      Object {
-        "address": Object {
+      {
+        "address": {
           "city": "b1",
         },
       }
@@ -879,12 +945,12 @@ describe("formState", () => {
     it("can wrap an existing list observable", () => {
         // Given an array observable that is already created
         const b1 = { title: "b1" };
-        const books = mobx_1.observable([b1]);
+        const books = (0, mobx_1.observable)([b1]);
         // When we create a form state around it
         const formState = createAuthorInputState({ books });
         // Then the initial book was copied over
         let lastLength = 0;
-        mobx_1.autorun(() => {
+        (0, mobx_1.autorun)(() => {
             lastLength = formState.books.rows.length;
         });
         expect(lastLength).toEqual(1);
@@ -903,7 +969,7 @@ describe("formState", () => {
         expect(config).toBeDefined();
     });
     it("can reset observable objects with computeds", () => {
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             lastName: { type: "value" },
             fullName: { type: "value", computed: true },
@@ -915,8 +981,35 @@ describe("formState", () => {
         formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
+    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);
+        expect(formState.firstName.value).toEqual("first");
+        expect(formState.fullName.value).toEqual("first last");
+        // And we hook up reactivity to the computed
+        let numCalcs = 0;
+        (0, mobx_1.autorun)(() => {
+            numCalcs++;
+            noop(formState.fullName.value);
+        });
+        // When the underlying mobx class is directly changed
+        instance.firstName = "change";
+        // Then our form-state computed re-run
+        expect(numCalcs).toBe(2);
+        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
+        expect(numCalcs).toBe(3);
+        expect(formState.fullName.value).toEqual("undefined last");
+    });
     it("can set computeds that have setters", () => {
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             lastName: { type: "value" },
             fullName: { type: "value", computed: true },
@@ -929,7 +1022,7 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("first");
     });
     it("can mark fields as read only", () => {
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             lastName: { type: "value" },
             fullName: { type: "value", readOnly: true },
@@ -943,7 +1036,7 @@ describe("formState", () => {
     });
     it("can return only changed primitive fields", () => {
         // Given an author
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
             id: "a:1",
             firstName: "f",
             lastName: "l",
@@ -961,7 +1054,7 @@ describe("formState", () => {
     });
     it("can return only changed object fields", () => {
         // Given an author with an address object
-        const formState = objectField_1.createObjectState(authorWithAddressConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithAddressConfig, {
             id: "a:1",
             firstName: "f",
             address: { city: "c1", street: "s1" },
@@ -978,7 +1071,7 @@ describe("formState", () => {
     });
     it("changedValue skips empty nested fields", () => {
         // Given a new author with an address object
-        const formState = objectField_1.createObjectState(authorWithAddressConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithAddressConfig, {
             firstName: "f",
             // And nothing is in the address
             address: {},
@@ -989,7 +1082,7 @@ describe("formState", () => {
     });
     it("changedValue skips effectively empty nested fields", () => {
         // Given a new author with an address object
-        const formState = objectField_1.createObjectState(authorWithAddressConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithAddressConfig, {
             firstName: "f",
             // And only undefined keys are in the address
             address: { city: undefined },
@@ -1000,7 +1093,7 @@ describe("formState", () => {
     });
     it("can return only changed list fields", () => {
         // Given an author with some books
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
             id: "a:1",
             firstName: "f",
             books: [
@@ -1021,7 +1114,7 @@ describe("formState", () => {
     });
     it("can return only changed but incremental list fields", () => {
         // Given an author
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             // And the books collection is marked as incremental (i.e. line items)
             books: {
@@ -1052,7 +1145,7 @@ describe("formState", () => {
     });
     it("uses the op key as a hint to use incremental list behavior", () => {
         // Given an author
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             // And the books collection is not explicitly marked as incremental
             books: {
@@ -1085,7 +1178,7 @@ describe("formState", () => {
     });
     it("defaults the incremental op key to included when not set", () => {
         // Given an author
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             // And the books collection is not explicitly marked as incremental
             books: {
@@ -1126,9 +1219,9 @@ describe("formState", () => {
         });
     });
     it("can observe value changes", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f" });
         let ticks = 0;
-        mobx_1.reaction(() => formState.value, () => ticks++, { equals: () => false });
+        (0, mobx_1.reaction)(() => formState.value, () => ticks++, { equals: () => false });
         expect(ticks).toEqual(0);
         formState.firstName.value = "f";
         expect(ticks).toEqual(0);
@@ -1136,9 +1229,9 @@ describe("formState", () => {
         expect(ticks).toEqual(1);
     });
     it("can observe value changes on lists", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { books: [{ title: "b1" }] });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { books: [{ title: "b1" }] });
         let ticks = 0;
-        mobx_1.reaction(() => formState.books.value, () => ticks++, { equals: () => false });
+        (0, mobx_1.reaction)(() => formState.books.value, () => ticks++, { equals: () => false });
         expect(ticks).toEqual(0);
         formState.books.rows[0].title.value = "b1";
         expect(ticks).toEqual(0);
@@ -1148,7 +1241,7 @@ describe("formState", () => {
         expect(ticks).toEqual(2);
     });
     it("does not override a focused, changed field", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given first name is focused
         formState.firstName.focus();
         // And they have wip edits
@@ -1163,7 +1256,7 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("fff");
     });
     it("does update a focused, unchanged field", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given first name is focused, but has not changed
         formState.firstName.focus();
         // When a mutation result sets both firstName and lastName
@@ -1172,7 +1265,7 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("f2");
     });
     it("trims string values on blur", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with spaces
         formState.firstName.focus();
         formState.firstName.set("f ");
@@ -1184,7 +1277,7 @@ describe("formState", () => {
         expect(formState.firstName.value).toEqual("f");
     });
     it("trims string values on maybeAutoSave", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with spaces
         formState.firstName.focus();
         formState.firstName.set("f ");
@@ -1198,7 +1291,7 @@ describe("formState", () => {
         expect(formState.firstName.touched).toEqual(true);
     });
     it("trims empty values to undefined on blur", () => {
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given the user is typing with only spaces
         formState.firstName.focus();
         formState.firstName.set(" ");
@@ -1216,7 +1309,7 @@ describe("formState", () => {
     });
     it("can work with both required inputs and optional fields", () => {
         // And we drop it in a form.
-        const form = objectField_1.createObjectState({
+        const form = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             firstName: { type: "value" },
         }, { id: "a:1" });
@@ -1237,7 +1330,7 @@ describe("formState", () => {
     });
     it("can have child object states passed in as field states", () => {
         // Given an author
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             // And address is modeled as a value object
             address: { type: "value" },
@@ -1254,7 +1347,7 @@ describe("formState", () => {
     });
     it("provides isNewEntity", () => {
         // Given an author without an id
-        const formState = objectField_1.createObjectState(authorWithAddressConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithAddressConfig, {
             firstName: "f",
             address: { city: "c1", street: "s1" },
         });
@@ -1269,7 +1362,7 @@ describe("formState", () => {
     });
     it("isNewEntity is false if there is no id field", () => {
         // Given an author without an id field defined
-        const formState = objectField_1.createObjectState({
+        const formState = (0, objectField_1.createObjectState)({
             firstName: { type: "value" },
             address: { type: "object", config: { street: { type: "value" } } },
         }, {});
@@ -1279,7 +1372,7 @@ describe("formState", () => {
     });
     it("provides isNewEntity for lists", () => {
         // Given an author & books without an id
-        const formState = objectField_1.createObjectState(authorWithBooksConfig, {
+        const formState = (0, objectField_1.createObjectState)(authorWithBooksConfig, {
             books: [{ title: "t1" }, { title: "t2" }],
         });
         // Then both books know they are new
@@ -1338,7 +1431,7 @@ describe("formState", () => {
     });
     it("can optionally ignore the order of list state rows when determining dirty state", () => {
         // Given a list state in a specific order, and the `strictOrder` option set to `false`
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             books: {
                 type: "list",
                 strictOrder: false,
@@ -1357,14 +1450,14 @@ describe("formState", () => {
     });
     describe("fragments", () => {
         it("ignores changes within fragments", () => {
-            const a = objectField_1.createObjectState({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: objectField_1.fragment({ foo: "1" }) });
+            const a = (0, objectField_1.createObjectState)({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: (0, objectField_1.fragment)({ foo: "1" }) });
             let numCalcs = 0;
-            mobx_1.autorun(() => {
+            (0, mobx_1.autorun)(() => {
                 numCalcs++;
                 noop(a.value);
             });
             expect(a.data.value).toEqual({ foo: "1" });
-            expect(mobx_1.isObservable(a.data.value)).toBe(false);
+            expect((0, mobx_1.isObservable)(a.data.value)).toBe(false);
             expect(numCalcs).toEqual(1);
             a.data.value = { foo: "2" };
             expect(numCalcs).toEqual(2);
@@ -1372,19 +1465,19 @@ describe("formState", () => {
             expect(numCalcs).toEqual(2);
         });
         it("ignores fragments in changedValue", () => {
-            const a = objectField_1.createObjectState({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: objectField_1.fragment({ foo: "1" }) });
+            const a = (0, objectField_1.createObjectState)({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: (0, objectField_1.fragment)({ foo: "1" }) });
             a.title.value = "b2";
-            a.data.value = objectField_1.fragment({ foo: "2" });
+            a.data.value = (0, objectField_1.fragment)({ foo: "2" });
             expect(a.changedValue).toMatchInlineSnapshot(`
-        Object {
+        {
           "title": "b2",
         }
       `);
         });
         it("ignores fragments in value", () => {
-            const a = objectField_1.createObjectState({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: objectField_1.fragment({ foo: "1" }) });
+            const a = (0, objectField_1.createObjectState)({ title: { type: "value" }, data: { type: "fragment" } }, { title: "b1", data: (0, objectField_1.fragment)({ foo: "1" }) });
             expect(a.value).toMatchInlineSnapshot(`
-        Object {
+        {
           "title": "b1",
         }
       `);
@@ -1392,7 +1485,7 @@ describe("formState", () => {
     });
     it("sets id key correctly", () => {
         // Given an author
-        const a = objectField_1.createObjectState({
+        const a = (0, objectField_1.createObjectState)({
             id: { type: "value" },
             otherId: { type: "value", isIdKey: true },
         }, {});
@@ -1404,7 +1497,8 @@ class ObservableObject {
     constructor() {
         this.firstName = "first";
         this.lastName = "last";
-        mobx_1.makeAutoObservable(this);
+        this.age = undefined;
+        (0, mobx_1.makeAutoObservable)(this);
     }
     get fullName() {
         return `${this.firstName} ${this.lastName}`;
@@ -1432,7 +1526,7 @@ const authorWithBooksConfig = {
     },
 };
 function createAuthorInputState(input, maybeAutoSave) {
-    return objectField_1.createObjectState(authorWithBooksConfig, input, { maybeAutoSave });
+    return (0, objectField_1.createObjectState)(authorWithBooksConfig, input, { maybeAutoSave });
 }
 const authorWithAddressConfig = {
     id: { type: "value" },
@@ -1468,6 +1562,6 @@ const authorWithAddressAndBooksConfig = {
     },
 };
 function createAuthorWithAddressInputState(input) {
-    return objectField_1.createObjectState(authorWithAddressConfig, input);
+    return (0, objectField_1.createObjectState)(authorWithAddressConfig, input);
 }
 function noop(t) { }