@homebound/form-state 2.15.4 → 2.17.0

package/README.md

@@ -5,27 +5,69 @@
 
 form-state is a headless form state management library, built on top of mobx.
 
-It acts as a buffer between the canonical data/entity (i.e. the server-side data, or local Redux/GraphQL/etc. cache data) and the user's WIP data/entity that is being actively mutated in form fields.
+It acts as a buffer between the canonical data (i.e. the server-side data, or your app's GraphQL/Redux/etc. global store) and the user's WIP data that is being actively mutated in form fields (which is "too chatty"/WIP to store in the global store).
 
 It also keeps track of low-level form UX details like:
 
-* Which form fields are dirty
-* Which form fields are valid/invalid
-* Which form fields are touched (i.e. don't show validation errors for untouched fields)
-* Enabling/disabling buttons/form UX based on the overall form-wide state
-* Submitting the form should touch (validate) all fields
-* Auto-saving the form when appropriate (i.e. not on keystroke, but after blur/leaving the field)
-* Queueing auto-saves if one is already in-flight
-  * Auto-saves in a table with per-row forms will serialize to avoid cross-child write conflicts on the backend
-* Not over-writing the user's WIP/actively-focused field when auto-saved data refreshes 
-* Building a wire payload that has only changed fields
-  * `form.changedValue` will return the entity `id` + only changed fields to faciliate doing partial update APIs
-  * Supports collections of children, i.e. a `author: { books: [...} }` will include only changed books if necessary
-  * Child collections can be either exhausive (if any child changes, submit them all) or incremental (only include changed children), to match the backend endpoint's semantics
+- Which form fields are dirty
+- Which form fields are valid/invalid
+- Which form fields are touched (i.e. don't show validation errors for untouched fields)
+- Enabling/disabling buttons/form UX based on the overall form-wide state
+- Submitting the form should touch (validate) all fields
+- Auto-saving the form when appropriate (i.e. not on keystroke, but after blur/leaving the field)
+- Queueing auto-saves if one is already in-flight
+  - Auto-saves in a table with per-row forms will serialize to avoid cross-child write conflicts on the backend
+- Not over-writing the user's WIP/actively-focused field when auto-saved data refreshes
+- Building a wire payload that has only changed fields
+  - `form.changedValue` will return the entity `id` + only changed fields to faciliate doing partial update APIs
+  - Supports collections of children, i.e. a `author: { books: [...} }` will include only changed books if necessary
+  - Child collections can be either exhausive (if any child changes, submit them all) or incremental (only include changed children), to match the backend endpoint's semantics
 
-# The Three Type/Shapes Mental Model
+# Main Features
 
-In general when working with forms (e.g. not just form-state), there are three types/shapes of data involved:
+There are two main reasons why form-state exists:
+
+1. Provide a `FieldState` interface for component libraries
+2. Match the "three shapes" mental model of our forms
+
+## FieldState Interface & "One-Line" Forms
+
+The core abstraction that `form-state` provides is a `FieldState` interface that looks like:
+
+```ts
+// Very simplified example
+interface FieldState {
+  value: V
+  errors: string[]
+  valid: boolean
+  touched: boolean
+}
+```
+
+Which combines all the logical aspects of "a single form field" into a single object/prop.
+
+This facilitates the "gold standard" of form libraries, which is "one line per form field", i.e:
+
+```tsx
+function AuthorEditorComponent() {
+  const author = useFormState(() => /* ... */ );
+  return (
+    <FormLines>
+      <BoundTextField field={author.firstName} />
+      <BoundTextField field={author.lastName} />
+      <BoundSelectField field={author.city} options={...cities...} />
+    </FormLines>
+  )
+}
+```
+
+Besides great developer ergonomics (low boilerplate, very DRY code), this approach also provides a very consistent UI/UX for users, because all forms get the highly-polish behavior of `BoundTextField` for free.
+
+(See the `BoundTextField` in [Beam](https://github.com/homebound-team/beam) for an actual implementation of this approach.)
+
+## The Three Shapes Mental Model
+
+In general when working with any forms (i.e. not just `form-state`), there are three types/shapes of data involved:
 
 1. The input data/shape from the server (i.e. a GraphQL/REST query)
 2. The form data/shape that is being reactively bound to form fields (i.e. used as `<TextField value={form.firstName} onChange={(v) => form.firstName = v} />`)
@@ -33,18 +75,17 @@ In general when working with forms (e.g. not just form-state), there are three t
 
 form-state generally refers to each of these shapes as:
 
-* The input type
-  * (Hrm, in retrospect "input" is an unfortunate term b/c that is what GraphQL uses for its mutation types, i.e. `input SaveAuthorInput`...we should consider changing this).
-* The form type
-* The ...third type...
-
-And then provides an API/DSL for managing the mapping between each of these in a standard/conventional manner. 
+- The input type
+  - (Hrm, in retrospect "input" is an unfortunate term b/c that is what GraphQL uses for its mutation types, i.e. `input SaveAuthorInput`...we should consider changing this).
+- The form type
+- The ...third type...
 
+And then provides an API/DSL for managing the mapping between each of these in a standard/conventional manner.
 
 Admittedly (and hopefully, b/c it makes the code simpler), the differences between each of these types can often be small, i.e.:
 
-* The input type might have `{ author: { book: { id: "b:1" } }` but the mutation wants `{ author: { bookId: "b:1" } }`
-* ...have other examples...
+- The input type might have `{ author: { book: { id: "b:1" } }` but the mutation wants `{ author: { bookId: "b:1" } }`
+- ...have other examples...
 
 These are usually simple/mechanistic changes, but nonetheless just some boilerplate that form-state provides conventions for.
 
@@ -60,7 +101,54 @@ See the [sample](https://github.com/homebound-team/form-state/blob/main/src/Form
 
 - Undo/redo would in theory be neat and easy to do on top of the existing infra
 
-# Internal Implementation
+# Features
+
+## Fragments
+
+Normally, form-state expects all fields in the form to be inputs to the GraphQL mutation/wire call. For example, the `author.firstName` field will always be submitted to the `saveAuthor` mutation (albeit with `author.changedValue` you can have `firstName` conditionally included).
+
+However, sometimes there is "other data" that your UX needs to render the form, which is not strictly a form field, but would be handy for the data to "just be on the form" anyway, as you're passing it in around code.
+
+A stereotypical example of this is GraphQL fragments, where an `AuthorFragment` might have a lot of misc read-only info that you want to display next to/within your form, but is not technically editable.
+
+In form-state, you can model with as a `Fragment`, which is set up as:
+
+```ts
+// Your input type, likely generated from GraphQL mutation
+type AuthorInput = { firstName?: string };
+
+// Your wire data likely from your page's GraphQL query to get
+// the author to edit + also "misc other data"
+type AuthorFragment = { firstName: string; miscOtherData: {} };
+
+// For your page's form state, add-in the "extra data"
+type AuthorForm = AuthorInput & {
+  // The `Fragment` type tells form-state this is not a regular form field
+  data: Fragment<AuthorFragment >
+};
+
+// Tell the form config the "fragment" is not a real field
+const config: ObjectConfig<AuthorForm> = {
+  firstName: { type: "value", rules: [require] },
+  data: { type: "fragment" },
+}
+
+// Now in the component...
+const data = useGraphQLQuery();
+const form = useFormState({
+  config,
+  init: {
+    input: data,
+    map: (d) => ({
+      firstName: data.author.firstName,
+      data: fragment(data),
+    }),
+  },
+});
+```
+
+
+# Internal Implementation Notes
 
 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).
 
@@ -69,6 +157,3 @@ This works well b/c the "actual data" returned from `ObjectState.value` or `Fiel
 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/FormStateApp.d.ts

@@ -2,5 +2,5 @@
 import { FieldState } from "./index";
 export declare function FormStateApp(): JSX.Element;
 export declare function TextField(props: {
-    field: FieldState<any, string | null | undefined>;
+    field: FieldState<string | null | undefined>;
 }): JSX.Element;

package/dist/config.d.ts

@@ -1,4 +1,4 @@
-import { ObjectState } from "./fields/objectField";
+import { Fragment, ObjectState } from "./fields/objectField";
 import { Rule } from "./rules";
 import { Builtin } from "./utils";
 /**
@@ -8,15 +8,19 @@ import { Builtin } from "./utils";
  * the caller define field-specific behavior, i.e. validation rules.
  */
 export declare type ObjectConfig<T> = {
-    [P in keyof OmitIf<T, Function>]: T[P] extends Array<infer U> | null | undefined ? U extends Builtin ? ValueFieldConfig<T, T[P]> : ListFieldConfig<T, U> : ValueFieldConfig<T, T[P]> | ObjectFieldConfig<T[P]>;
+    [P in keyof OmitIf<T, Function>]: T[P] extends Fragment<infer V> ? FragmentFieldConfig : T[P] extends Array<infer U> | null | undefined ? U extends Builtin ? ValueFieldConfig<T, T[P]> : ListFieldConfig<T, U> : ValueFieldConfig<T, T[P]> | ObjectFieldConfig<T[P]>;
 };
 declare type OmitIf<Base, Condition> = Pick<Base, {
     [Key in keyof Base]: Base[Key] extends Condition ? never : Key;
 }[keyof Base]>;
+/** Field configuration for an opaque value that we don't actually want to include. */
+export declare type FragmentFieldConfig = {
+    type: "fragment";
+};
 /** Field configuration for primitive values, i.e. strings/numbers/Dates/user-defined types. */
 export declare type ValueFieldConfig<T, V> = {
     type: "value";
-    rules?: Rule<T, V | null | undefined>[];
+    rules?: Rule<V | null | undefined>[];
     /**
      * If true, marks this field as the id, which will be used for things like "always include in changedValue".
      *
@@ -44,7 +48,7 @@ export declare type ValueFieldConfig<T, V> = {
 export declare type ListFieldConfig<T, U> = {
     type: "list";
     /** Rules that can run on the full list of children. */
-    rules?: Rule<T, readonly ObjectState<U>[]>[];
+    rules?: Rule<readonly ObjectState<U>[]>[];
     /** Config for each child's form state, i.e. each book. */
     config: ObjectConfig<U>;
     /**

package/dist/fields/fragmentField.d.ts

@@ -0,0 +1,4 @@
+export interface FragmentField<V> {
+    value: V;
+}
+export declare function newFragmentField<T, K extends keyof T>(parentInstance: T, key: K): FragmentField<T[K]>;

package/dist/fields/fragmentField.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.newFragmentField = void 0;
+const mobx_1 = require("mobx");
+const utils_1 = require("../utils");
+function newFragmentField(parentInstance, key) {
+    // We always return the same `instance` field from our `value` method, but
+    // we want to pretend that it's observable, so use a tick to force it.
+    const _tick = mobx_1.observable({ value: 1 });
+    // We steal the fragment from our parent, so that it doesn't
+    // accidentally end up on the wire
+    let value = parentInstance[key];
+    delete parentInstance[key];
+    const obj = {
+        get value() {
+            _tick.value > 0 || utils_1.fail();
+            return value;
+        },
+        set value(v) {
+            value = v;
+            _tick.value++;
+        },
+    };
+    return mobx_1.makeAutoObservable(obj, { value: false });
+}
+exports.newFragmentField = newFragmentField;

package/dist/fields/listField.d.ts

@@ -3,9 +3,9 @@ import { ObjectState } from "./objectField";
 import { FieldState } from "./valueField";
 import { Rule } from "../rules";
 /** Form state for list of children, i.e. `U` is a `Book` in a form with a `books: Book[]`. */
-export interface ListFieldState<T, U> extends Omit<FieldState<T, U[]>, "originalValue"> {
+export interface ListFieldState<T, U> extends Omit<FieldState<U[]>, "originalValue"> {
     readonly rows: ReadonlyArray<ObjectState<U>>;
     add(value: U, index?: number): void;
     remove(indexOrValue: number | U): void;
 }
-export declare function newListFieldState<T, K extends keyof T, U>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T, readonly ObjectState<U>[]>[], listConfig: ListFieldConfig<T, U>, config: ObjectConfig<U>, maybeAutoSave: () => void): ListFieldState<T, U>;
+export declare function newListFieldState<T, K extends keyof T, U>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<readonly ObjectState<U>[]>[], listConfig: ListFieldConfig<T, U>, config: ObjectConfig<U>, maybeAutoSave: () => void): ListFieldState<T, U>;

package/dist/fields/objectField.d.ts

@@ -1,4 +1,5 @@
 import { ObjectConfig } from "../config";
+import { FragmentField } from "./fragmentField";
 import { ListFieldState } from "./listField";
 import { FieldState, InternalSetOpts, SetOpts } from "./valueField";
 import { Builtin } from "../utils";
@@ -27,7 +28,7 @@ import { Builtin } from "../utils";
  *       - title: FieldState
  * ```
  */
-export declare type ObjectState<T, P = any> = FieldStates<T> & FieldState<P, T> & {
+export declare type ObjectState<T, P = any> = FieldStates<T> & FieldState<T> & {
     /** Sets the state of fields in `state`. */
     set(state: Partial<T>, opts?: SetOpts): void;
     /** Returns whether the object can be saved, i.e. is valid, but also as a side-effect marks touched. */
@@ -36,9 +37,14 @@ export declare type ObjectState<T, P = any> = FieldStates<T> & FieldState<P, T>
 export declare type ObjectStateInternal<T, P = any> = ObjectState<T, P> & {
     set(value: P, opts?: InternalSetOpts): void;
 };
+declare const fragmentSym: unique symbol;
+export declare type Fragment<V> = V & {
+    [fragmentSym]: true;
+};
+export declare function fragment<V>(value: V): Fragment<V>;
 /** For a given input type `T`, decorate each field into the "field state" type that holds our form-relevant state, i.e. valid/touched/etc. */
 declare type FieldStates<T> = {
-    [K in keyof T]-?: T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T, T[K]> : ListFieldState<T, U> : T[K] extends Builtin | null | undefined ? FieldState<T, T[K]> : ObjectState<T[K], T>;
+    [K in keyof T]-?: T[K] extends Fragment<infer V> ? FragmentField<V> : T[K] extends Array<infer U> | null | undefined ? [U] extends [Builtin] ? FieldState<T[K]> : ListFieldState<T, U> : T[K] extends Builtin | null | undefined ? FieldState<T[K]> : ObjectState<T[K], T>;
 };
 /**
  * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
@@ -50,5 +56,5 @@ declare type FieldStates<T> = {
 export declare function createObjectState<T>(config: ObjectConfig<T>, instance: T, opts?: {
     maybeAutoSave?: () => void;
 }): ObjectState<T>;
-export declare function newObjectState<T, P = any>(config: ObjectConfig<T>, parentState: (() => ObjectState<P>) | undefined, parentListState: FieldState<any, any> | undefined, instance: T, key: keyof T | undefined, maybeAutoSave: () => void): ObjectState<T, P>;
+export declare function newObjectState<T, P = any>(config: ObjectConfig<T>, parentState: (() => ObjectState<P>) | undefined, parentListState: FieldState<any> | undefined, instance: T, key: keyof T | undefined, maybeAutoSave: () => void): ObjectState<T, P>;
 export {};

package/dist/fields/objectField.js

@@ -1,10 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.newObjectState = exports.createObjectState = void 0;
+exports.newObjectState = exports.createObjectState = exports.fragment = void 0;
 const mobx_1 = require("mobx");
+const fragmentField_1 = require("./fragmentField");
 const listField_1 = require("./listField");
 const valueField_1 = require("./valueField");
 const utils_1 = require("../utils");
+const fragmentSym = Symbol("fragment");
+function fragment(value) {
+    return value;
+}
+exports.fragment = fragment;
 /**
  * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
  *
@@ -45,6 +51,9 @@ function newObjectState(config, parentState, parentListState, instance, key, may
             }
             field = newObjectState(config.config, getObjectState, undefined, instance[key], key, maybeAutoSave);
         }
+        else if (config.type === "fragment") {
+            field = fragmentField_1.newFragmentField(instance, key);
+        }
         else {
             throw new Error("Unsupported");
         }

package/dist/fields/valueField.d.ts

@@ -10,7 +10,7 @@ import { Rule } from "../rules";
  * Note that `V` will always have `null | undefined` added to it by `FieldStates`, b/c most form fields
  * i.e. text boxes, can always be cleared out/deleted.
  */
-export interface FieldState<T, V> {
+export interface FieldState<V> {
     readonly key: string;
     value: V;
     readonly originalValue: V;
@@ -21,7 +21,7 @@ export interface FieldState<T, V> {
     readonly dirty: boolean;
     readonly valid: boolean;
     readonly isNewEntity: boolean;
-    rules: Rule<T, V>[];
+    rules: Rule<V>[];
     readonly errors: string[];
     /** Returns a subset of V with only the changed values. Currently not observable. */
     readonly changedValue: V;
@@ -49,11 +49,11 @@ export interface InternalSetOpts extends SetOpts {
     /** `refreshing` is when `useFormState` sees a new value. */
     refreshing?: boolean;
 }
-export interface FieldStateInternal<T, V> extends FieldState<T, V> {
+export interface FieldStateInternal<T, V> extends FieldState<V> {
     set(value: V, opts?: InternalSetOpts): void;
     _isIdKey: boolean;
     _isDeleteKey: boolean;
     _isReadOnlyKey: boolean;
     _focused: boolean;
 }
-export declare function newValueFieldState<T, K extends keyof T>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T, T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T, T[K] | null | undefined>;
+export declare function newValueFieldState<T, K extends keyof T>(parentInstance: T, parentState: () => ObjectState<T>, key: K, rules: Rule<T[K] | null | undefined>[], isIdKey: boolean, isDeleteKey: boolean, isReadOnlyKey: boolean, computed: boolean, readOnly: boolean, strictOrder: boolean, maybeAutoSave: () => void): FieldState<T[K] | null | undefined>;

package/dist/formState.test.js

@@ -941,24 +941,6 @@ describe("formState", () => {
         formState.revertChanges();
         expect(formState.firstName.value).toEqual("first");
     });
-    it("lets rules validate against other fields", () => {
-        const formState = objectField_1.createObjectState({
-            firstName: { type: "value", rules: [] },
-            lastName: {
-                type: "value",
-                rules: [
-                    ({ object }) => {
-                        if (object.firstName.value === object.lastName.value) {
-                            return "Must not match first name";
-                        }
-                    },
-                ],
-            },
-        }, {});
-        formState.firstName.value = "bob";
-        formState.lastName.value = "bob";
-        expect(formState.lastName.errors).toEqual(["Must not match first name"]);
-    });
     it("can return only changed primitive fields", () => {
         // Given an author
         const formState = objectField_1.createObjectState(authorWithBooksConfig, {
@@ -1338,6 +1320,41 @@ describe("formState", () => {
         // The list is again dirty
         expect(a1.books.dirty).toBeTruthy();
     });
+    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" }) });
+            let numCalcs = 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(numCalcs).toEqual(1);
+            a.data.value = { foo: "2" };
+            expect(numCalcs).toEqual(2);
+            a.data.value.foo = "3";
+            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" }) });
+            a.title.value = "b2";
+            a.data.value = 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" }) });
+            expect(a.value).toMatchInlineSnapshot(`
+        Object {
+          "title": "b1",
+        }
+      `);
+        });
+    });
 });
 class ObservableObject {
     constructor() {
@@ -1409,3 +1426,4 @@ const authorWithAddressAndBooksConfig = {
 function createAuthorWithAddressInputState(input) {
     return objectField_1.createObjectState(authorWithAddressConfig, input);
 }
+function noop(t) { }

package/dist/rules.d.ts

@@ -1,14 +1,10 @@
-import { ObjectState } from "./fields/objectField";
-declare type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
 /** A validation rule, given the value and name, return the error string if valid, or undefined if valid. */
-export declare type Rule<T, V> = (opts: {
+export declare type Rule<V> = (opts: {
     value: V;
     key: string;
     originalValue: V;
-    object: IfAny<T, any, ObjectState<T>>;
 }) => string | undefined;
 /** A rule that validates `value` is not `undefined`, `null`, or empty string. */
 export declare const required: <V>({ value: v }: {
     value: V;
 }) => string | undefined;
-export {};

package/dist/useFormState.test.js

@@ -261,17 +261,17 @@ describe("useFormState", () => {
     });
     it("useFormState can accept new data with computed fields", async () => {
         // Given a component
-        function TestComponent() {
-            // And it's using a class/mobx proxy as the basis for the data
-            class AuthorRow {
-                constructor(firstName, lastName) {
-                    this.firstName = firstName;
-                    this.lastName = lastName;
-                }
-                get fullName() {
-                    return this.firstName + " " + this.lastName;
-                }
+        // And it's using a class/mobx proxy as the basis for the data
+        class AuthorRow {
+            constructor(firstName, lastName) {
+                this.firstName = firstName;
+                this.lastName = lastName;
+            }
+            get fullName() {
+                return this.firstName + " " + this.lastName;
             }
+        }
+        function TestComponent() {
             // And we have two sets of data
             const data1 = { firstName: "f1", lastName: "l1" };
             const data2 = { firstName: "f2", lastName: "l2" };

package/dist/useFormStates.test.js

@@ -39,7 +39,7 @@ describe("useFormStates", () => {
             const [apiData, setApiData] = react_1.useState({ id: "a:1", firstName: "Brandon" });
             const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
-            const originalState = react_1.useMemo(() => getFormState(apiData), []);
+            const originalState = react_1.useMemo(() => getFormState(apiData), [getFormState]);
             const state = getFormState(apiData);
             return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "firstName" }, { children: state.firstName.value }), void 0),
                     jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),
@@ -124,6 +124,7 @@ describe("useFormStates", () => {
             const [config, setConfig] = react_1.useState(originalConfig);
             const { getFormState } = useFormStates_1.useFormStates({ config, autoSave, getId: (o) => o.id });
             // Memoize an original for comparing the update against.
+            // eslint-disable-next-line react-hooks/exhaustive-deps
             const originalState = react_1.useMemo(() => getFormState(apiData), []);
             const state = getFormState(apiData);
             return (jsx_runtime_1.jsxs("div", { children: [jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "statesEqual" }, { children: JSON.stringify(state === originalState) }), void 0),

package/package.json

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