@homebound/form-state 2.25.2 → 2.26.1

package/dist/config.d.ts

@@ -38,7 +38,7 @@ export type ValueFieldConfig<V> = {
     computed?: boolean;
     /** Marks a field as being initially read-only, i.e. `field.readOnly = true/false` can change this default. */
     readOnly?: boolean;
-    /** Marks an array field to be order agnostic when determining changed/dirty states */
+    /** Marks an array field to be order agnostic when determining changed/dirty states, defaults true. */
     strictOrder?: false;
 };
 /** Field configuration for list values, i.e. `U` is `Book` in a form with `books: Book[]`. */
@@ -60,7 +60,7 @@ export type ListFieldConfig<U> = {
      * default behavior.
      */
     update?: "exhaustive" | "incremental";
-    /** Set to not consider the order of the list when evaluating changed/dirty states. */
+    /** Set to not consider the order of the list when evaluating changed/dirty states, defaults true. */
     strictOrder?: false;
 };
 export type ObjectFieldConfig<U> = {

package/dist/fields/listField.js

@@ -50,7 +50,8 @@ function newListFieldState(parentCopy, parentInstance, parentState, key, rules,
         key: key,
         // Our fundamental state of wrapped Us
         get value() {
-            return _tick.value > 0 && _childTick.value > 0 ? parentInstance[key] : (0, utils_1.fail)();
+            var _a;
+            return _tick.value > 0 && _childTick.value > 0 ? ((_a = parentInstance[key]) !== null && _a !== void 0 ? _a : []) : (0, utils_1.fail)();
         },
         _focused: false,
         _readOnly: false,

package/dist/useFormState.d.ts

@@ -9,6 +9,7 @@ export type InputAndMap<T, I> = {
     input: I;
     map?: (input: Exclude<I, null | undefined>) => T;
     ifUndefined?: T;
+    onlyOnce?: boolean;
 };
 export type QueryAndMap<T, I> = {
     query: Query<I>;

package/dist/useFormState.js

@@ -25,7 +25,13 @@ function useFormState(opts) {
     const [firstInitValue] = (0, react_1.useState)(() => (0, utils_1.initValue)(config, init));
     const isWrappingMobxProxy = !(0, is_plain_object_1.isPlainObject)(firstInitValue);
     // If they're using init.input, useMemo on it (and it might be an array), otherwise allow the identity of init be unstable
-    const dep = (0, utils_1.isInput)(init) ? makeArray(init.input) : (0, utils_1.isQuery)(init) ? [init.query.data, init.query.loading] : [];
+    const dep = (0, utils_1.isInput)(init)
+        ? init.onlyOnce
+            ? []
+            : makeArray(init.input)
+        : (0, utils_1.isQuery)(init)
+            ? [init.query.data, init.query.loading]
+            : [];
     const form = (0, react_1.useMemo)(() => {
         function maybeAutoSave() {
             if (isAutoSaving === "in-flight") {

package/dist/useFormState.test.js

@@ -92,6 +92,23 @@ describe("useFormState", () => {
         const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
         expect(r.baseElement.textContent).toEqual("");
     });
+    it("uses init.onlyOnce to not react to identity changes", async () => {
+        const config = { firstName: { type: "value" } };
+        const TestComponent = (0, mobx_react_1.observer)(() => {
+            // And we have an `init` value that is dynamic, so we can observe whether init reruns
+            const renderCount = (0, react_2.useRef)(0).current++;
+            const form = (0, useFormState_1.useFormState)({
+                config,
+                init: { input: { firstName: `${renderCount}` }, onlyOnce: true },
+            });
+            const [, setTick] = (0, react_2.useState)(0);
+            return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("button", { "data-testid": "change", onClick: () => setTick(1) }), (0, jsx_runtime_1.jsx)("div", { "data-testid": "firstName", children: form.firstName.value })] }));
+        });
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.firstName).toHaveTextContent("0");
+        (0, rtl_utils_1.click)(r.change);
+        expect(r.firstName).toHaveTextContent("0");
+    });
     it("keeps local changed values when a query refreshes", async () => {
         // Given a component
         function TestComponent() {
@@ -319,6 +336,22 @@ describe("useFormState", () => {
         // Then we auto save again
         expect(autoSave).toBeCalledTimes(2);
     });
+    it("returns empty lists even when inputs are undefined", async () => {
+        const autoSave = jest.fn();
+        // Given a component
+        function TestComponent() {
+            // And there is no initial data (i.e. we're creating the author)
+            const form = (0, useFormState_1.useFormState)({
+                config: authorWithBooksConfig,
+                init: { input: undefined, map: (d) => d },
+                autoSave,
+            });
+            return (0, jsx_runtime_1.jsx)("div", { "data-testid": "len", children: form.books.value.length });
+        }
+        // Then we can still read it as empty
+        const r = await (0, rtl_utils_1.render)((0, jsx_runtime_1.jsx)(TestComponent, {}));
+        expect(r.len).toHaveTextContent("0");
+    });
     it("does not infinite loop when calling set inside of auto-save", async () => {
         // Given a component
         let autoSaves = 0;

package/package.json

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