@homebound/form-state 2.15.1 → 2.15.4

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/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/fields/valueField.js

@@ -101,7 +101,7 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
             }
             // If the user has deleted/emptied a value that was originally set, keep it as `null`
             // so that our partial update to the backend correctly unsets it.
-            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value);
+            const keepNull = !utils_1.isEmpty(this.originalValue) && utils_1.isEmpty(value) && !opts.refreshing;
             // If a list of primitives was originally undefined, coerce `[]` to `undefined`
             const coerceEmptyList = value && value instanceof Array && value.length === 0 && utils_1.isEmpty(this.originalValue);
             const newValue = keepNull ? null : utils_1.isEmpty(value) || coerceEmptyList ? undefined : value;
@@ -135,7 +135,9 @@ function newValueFieldState(parentInstance, parentState, key, rules, isIdKey, is
         },
         get originalValue() {
             // A dummy check to for reactivity around our non-proxy value
-            return _originalValueTick.value > -1 ? _originalValue : _originalValue;
+            const value = _originalValueTick.value > -1 ? _originalValue : _originalValue;
+            // Re-create the `keepNull` logic so that `.value` === `.originalValue`
+            return value === null ? undefined : value;
         },
         set originalValue(v) {
             _originalValue = v;

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/dist/useFormState.js

@@ -91,6 +91,12 @@ function useFormState(opts) {
             return;
         }
         setLoading(form, opts);
+        // Note: maybe someday we want to watch the `id` value and notice if it's changing (i.e. 2 -> 3),
+        // and treat this more as a reset than a refresh, b/c the id changing means it's probably
+        // not "the cache refreshed after a mutation save" but "the cache changed b/c of changing
+        // rows in the table that our side panel's form has open/is focused on" (which ideally would
+        // be treated as a full component remount by having an `key` field somewhere in the parent
+        // component, but it's unlikely the user will always remember to do this).
         form.set(utils_1.initValue(config, init), { refreshing: true });
     }, [form, ...dep]);
     // Use useEffect so that we don't touch the form.init proxy during a render

package/dist/useFormState.test.js

@@ -528,6 +528,41 @@ describe("useFormState", () => {
         expect(result.current.autoSave.status).toBe(AutoSaveStatusProvider_1.AutoSaveStatus.DONE);
         jest.clearAllTimers();
     });
+    it("treats the id changing as a whole new entity instead of a delete", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent() {
+            // Given an initial author a1
+            const [author, setAuthor] = react_2.useState({ id: "a:1", firstName: "a1" });
+            const form = useFormState_1.useFormState({ config, init: { input: author, map: (a) => a } });
+            return (jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "value" }, { children: String(form.firstName.value) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "dirty" }, { children: String(form.firstName.dirty) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "originalValue" }, { children: String(form.firstName.originalValue) }), void 0),
+                        jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "objectValue" }, { children: String(form.value.firstName) }), void 0),
+                        jsx_runtime_1.jsx("div", { "data-testid": "a1", onClick: () => setAuthor({ id: "a:1", firstName: "a1" }) }, void 0),
+                        jsx_runtime_1.jsx("div", { "data-testid": "a2", onClick: () => setAuthor({ id: "a:2", firstName: undefined }) }, void 0)] }, void 0)) }, void 0));
+        }
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        // And the value is initially a1/and not dirty
+        expect(r.value()).toHaveTextContent("a1");
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("a1");
+        expect(r.objectValue()).toHaveTextContent("a1");
+        // When we switch to a completely separate author
+        rtl_utils_1.click(r.a2);
+        // Then it switches to the next author
+        expect(r.value()).toHaveTextContent("undefined");
+        // And the field is not dirty (which had been the case before this bug fix)
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("undefined");
+        expect(r.objectValue()).toHaveTextContent("undefined");
+        // And when we switch back to the original author
+        rtl_utils_1.click(r.a1);
+        // It again restores the value and does not think an edit was WIP
+        expect(r.value()).toHaveTextContent("a1");
+        expect(r.dirty()).toHaveTextContent("false");
+        expect(r.originalValue()).toHaveTextContent("a1");
+        expect(r.objectValue()).toHaveTextContent("a1");
+    });
 });
 const authorConfig = {
     id: { type: "value" },

package/dist/utils.d.ts

@@ -35,7 +35,7 @@ export declare function isEmpty(value: any): boolean;
  *
  * - "plain" objects that have no custom prototype/i.e. are object literals
  * - objects that implement `toJSON`
- *
+ * - arrays
  */
 export declare function areEqual<T>(a?: T, b?: T, strictOrder?: boolean): boolean;
 export declare function hasToJSON(o?: unknown): o is {

package/dist/utils.js

@@ -100,7 +100,7 @@ exports.isEmpty = isEmpty;
  *
  * - "plain" objects that have no custom prototype/i.e. are object literals
  * - objects that implement `toJSON`
- *
+ * - arrays
  */
 function areEqual(a, b, strictOrder) {
     if (is_plain_object_1.isPlainObject(a)) {
@@ -117,7 +117,7 @@ function areEqual(a, b, strictOrder) {
         }
         if (a.length !== b.length)
             return false;
-        return a.every((a1) => b.some((b1) => fast_deep_equal_1.default(a1, b1)));
+        return a.every((a1) => b.some((b1) => areEqual(a1, b1)));
     }
     return a === b;
 }

package/package.json

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