@homebound/form-state 2.15.0 → 2.15.3

package/README.md

@@ -59,3 +59,16 @@ See the [sample](https://github.com/homebound-team/form-state/blob/main/src/Form
 - Add `omitFromValue` so we can have two fields, `book.author.id` / `book.author.name`, where `book.author.name` is used for showing the author name, but `book.author.id` is the only field that is submitted to the server on mutation (maybe pair this with `Ref` based mutations)
 
 - Undo/redo would in theory be neat and easy to do on top of the existing infra
+
+# Internal Implementation
+
+form-state keeps the "actual data" (basically a POJO of your form data) separate from the "mobx proxies that track reactivity" (the `ObjectState` interface with `.get` / `.set` / `.errors` other methods).
+
+This works well b/c the "actual data" returned from `ObjectState.value` or `FieldState.value` is always a non-proxy POJO that can be dropped on the wire without causing serialization issues.
+
+However, it does mean that form-state internally uses a few "that looks odd" tricks like `_tick.value++` to ensure code like `formState.value.firstName` will be reactive, even though the `.firstName` is not actually a proxy access (but doing `formState.firstName.value` would be).
+
+(To be clear, both `formState.firstName.value` and `formState.value.firstName` return the same value, and also have the same reactivity semantics, this is just noting that form-state's internals need to do a few extra tricks to get the latter to be reactive.)
+
+
+

package/dist/AutoSaveStatus/AutoSaveStatusProvider.js

@@ -79,6 +79,13 @@ function AutoSaveStatusProvider({ children, resetToIdleTimeout = 6000 }) {
             resetToIdleTimeoutRef.current = null;
         }, resetToIdleTimeout);
     }, [resetStatus, resetToIdleTimeout, status]);
-    return (jsx_runtime_1.jsx(exports.AutoSaveStatusContext.Provider, Object.assign({ value: { status, resetStatus, errors, triggerAutoSave, resolveAutoSave } }, { children: children }), void 0));
+    const value = react_1.useMemo(() => ({ status, resetStatus, errors, triggerAutoSave, resolveAutoSave }), [
+        errors,
+        resetStatus,
+        resolveAutoSave,
+        status,
+        triggerAutoSave,
+    ]);
+    return jsx_runtime_1.jsx(exports.AutoSaveStatusContext.Provider, Object.assign({ value: value }, { children: children }), void 0);
 }
 exports.AutoSaveStatusProvider = AutoSaveStatusProvider;

package/dist/AutoSaveStatus/index.d.ts

@@ -1,2 +1,2 @@
-export { AutoSaveStatusContext, AutoSaveStatusProvider } from "./AutoSaveStatusProvider";
+export { AutoSaveStatus, AutoSaveStatusContext, AutoSaveStatusProvider } from "./AutoSaveStatusProvider";
 export { useAutoSaveStatus } from "./useAutoSaveStatus";

package/dist/AutoSaveStatus/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAutoSaveStatus = exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = void 0;
+exports.useAutoSaveStatus = exports.AutoSaveStatusProvider = exports.AutoSaveStatusContext = exports.AutoSaveStatus = void 0;
 var AutoSaveStatusProvider_1 = require("./AutoSaveStatusProvider");
+Object.defineProperty(exports, "AutoSaveStatus", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatus; } });
 Object.defineProperty(exports, "AutoSaveStatusContext", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusContext; } });
 Object.defineProperty(exports, "AutoSaveStatusProvider", { enumerable: true, get: function () { return AutoSaveStatusProvider_1.AutoSaveStatusProvider; } });
 var useAutoSaveStatus_1 = require("./useAutoSaveStatus");

package/dist/fields/listField.js

@@ -9,13 +9,14 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
     // Keep a map of "item in the parent list" -> "that item's ObjectState"
     const rowMap = new Map();
     const _tick = mobx_1.observable({ value: 1 });
+    const _childTick = mobx_1.observable({ value: 1 });
     // this is for dirty checking, not object identity
     let originalCopy = [...(parentInstance[key] || [])];
     const list = {
         key: key,
         // Our fundamental state of wrapped Us
         get value() {
-            return _tick.value > 0 ? parentInstance[key] : utils_1.fail();
+            return _tick.value > 0 && _childTick.value > 0 ? parentInstance[key] : utils_1.fail();
         },
         _focused: false,
         _readOnly: false,
@@ -67,7 +68,9 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             // transitively register us as a dependency on it
             if (_tick.value < 0)
                 utils_1.fail();
-            return (this.value || []).map((child) => {
+            // 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) {
@@ -202,9 +205,13 @@ function newListFieldState(parentInstance, parentState, key, rules, listConfig,
             _tick.value++;
         },
     };
-    return mobx_1.makeAutoObservable(list, {
+    const proxy = mobx_1.makeAutoObservable(list, {
         // See other makeAutoObservable comment
         value: mobx_1.computed({ equals: () => false }),
     });
+    // Any time a row's value changes, percolate that to our `.value` (so the callers to our
+    // `.value` will rerun given the value they saw has deeply changed.)
+    mobx_1.reaction(() => proxy.rows.map((r) => r.value), () => _childTick.value++);
+    return proxy;
 }
 exports.newListFieldState = newListFieldState;

package/dist/formState.test.js

@@ -1153,6 +1153,18 @@ describe("formState", () => {
         formState.firstName.value = "f2";
         expect(ticks).toEqual(1);
     });
+    it("can observe value changes on lists", () => {
+        const formState = objectField_1.createObjectState(authorWithBooksConfig, { books: [{ title: "b1" }] });
+        let ticks = 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);
+        formState.books.rows[0].title.value = "b1...";
+        expect(ticks).toEqual(1);
+        formState.books.add({ title: "b2" });
+        expect(ticks).toEqual(2);
+    });
     it("does not override a focused, changed field", () => {
         const formState = objectField_1.createObjectState(authorWithBooksConfig, { firstName: "f", lastName: "l" });
         // Given first name is focused

package/package.json

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