@homebound/form-state 2.10.0 → 2.12.0

package/dist/useFormState.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormState = void 0;
 const is_plain_object_1 = require("is-plain-object");
 const react_1 = require("react");
-const formState_1 = require("./formState");
+const objectField_1 = require("./fields/objectField");
 const utils_1 = require("./utils");
 // If the user's autoSave hook makes some last-minute `.set` calls to sneak
 // in some business logic right before their GraphQL mutation call, ignore it
@@ -16,7 +16,7 @@ let pendingAutoSave = false;
  * Creates a formState instance for editing in a form.
  */
 function useFormState(opts) {
-    const { config, init, addRules, readOnly = false, autoSave } = opts;
+    const { config, init, addRules, readOnly = false, loading, autoSave } = opts;
     // Use a ref so our memo'ized `onBlur` always see the latest value
     const autoSaveRef = react_1.useRef(autoSave);
     autoSaveRef.current = autoSave;
@@ -25,7 +25,7 @@ function useFormState(opts) {
     const [firstInitValue] = react_1.useState(() => utils_1.initValue(config, init));
     const isWrappingMobxProxy = !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 = init && "input" in init && "map" in init ? (Array.isArray(init.input) ? init.input : [init.input]) : [];
+    const dep = utils_1.isInput(init) ? makeArray(init.input) : utils_1.isQuery(init) ? [init.query.data, init.query.loading] : [];
     const form = react_1.useMemo(() => {
         function maybeAutoSave() {
             if (isAutoSaving === "in-flight") {
@@ -60,8 +60,9 @@ function useFormState(opts) {
             }
         }
         const value = firstRunRef.current ? firstInitValue : utils_1.initValue(config, init);
-        const form = formState_1.createObjectState(config, value, { maybeAutoSave });
+        const form = objectField_1.createObjectState(config, value, { maybeAutoSave });
         form.readOnly = readOnly;
+        setLoading(form, opts);
         // The identity of `addRules` is not stable, but assume that it is for better UX.
         (addRules || (() => { }))(form);
         firstRunRef.current = true;
@@ -80,12 +81,34 @@ function useFormState(opts) {
             firstRunRef.current = false;
             return;
         }
+        setLoading(form, opts);
         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
     react_1.useEffect(() => {
         form.readOnly = readOnly;
-    }, [form, readOnly]);
+        if (loading !== undefined) {
+            form.loading = loading;
+        }
+    }, [form, readOnly, loading]);
     return form;
 }
 exports.useFormState = useFormState;
+function setLoading(form, opts) {
+    const { loading, init } = opts;
+    if (loading !== undefined) {
+        // Prefer the explicit/top-level opts.loading if it's set
+        form.loading = loading;
+    }
+    else if (utils_1.isInput(init) && !init.ifUndefined) {
+        // Otherwise, check for `init.input`
+        form.loading = init.input === undefined;
+    }
+    else if (utils_1.isQuery(init)) {
+        // Or `query.loading`
+        form.loading = init.query.loading;
+    }
+}
+function makeArray(input) {
+    return Array.isArray(input) ? input : [input];
+}

package/dist/useFormState.test.js

@@ -7,7 +7,7 @@ const mobx_1 = require("mobx");
 const mobx_react_1 = require("mobx-react");
 const react_2 = require("react");
 const FormStateApp_1 = require("./FormStateApp");
-const formState_1 = require("./formState");
+const rules_1 = require("./rules");
 const useFormState_1 = require("./useFormState");
 describe("useFormState", () => {
     it("calls init.map if init.input is defined", async () => {
@@ -15,10 +15,10 @@ describe("useFormState", () => {
         function TestComponent() {
             const config = { firstName: { type: "value" } };
             // And we have query data that may or may not be defined
-            const data = Math.random() >= 0 ? { firstName: "bob" } : undefined;
-            // Then the lambda is passed the "de-undefined" data
+            const data = { firstName: "bob" };
             const form = useFormState_1.useFormState({
                 config,
+                // Then the lambda is passed the "de-undefined" data, i.e. `d.firstName` is not a compile error
                 init: { input: data, map: (d) => ({ firstName: d.firstName }) },
             });
             return jsx_runtime_1.jsx("div", { children: form.firstName.value }, void 0);
@@ -454,6 +454,51 @@ describe("useFormState", () => {
         expect(autoSaveStub).toBeCalledTimes(1);
         expect(autoSaveStub).toBeCalledWith({ id: "a:1", firstName: "first", lastName: "first" });
     });
+    it("sets loading if opts.loading is true", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ loading }) {
+            const form = useFormState_1.useFormState({ config, loading });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.query.loading: true`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { loading: true }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the query is not loading
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { loading: false }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
+    it("sets loading if input.data is undefined", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ data }) {
+            const form = useFormState_1.useFormState({ config, init: { input: data, map: (d) => d } });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.input: undefined`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { data: undefined }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the data is no longer undefined
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { data: { firstName: "first" } }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
+    it("sets loading if query.loading is true", async () => {
+        const config = { firstName: { type: "value" } };
+        function TestComponent({ loading, data }) {
+            const form = useFormState_1.useFormState({ config, init: { query: { data, loading, error: null }, map: (d) => d } });
+            return jsx_runtime_1.jsx(mobx_react_1.Observer, { children: () => jsx_runtime_1.jsx("div", Object.assign({ "data-testid": "loading" }, { children: String(form.loading) }), void 0) }, void 0);
+        }
+        // And we initially pass in `init.query.loading: true`
+        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, { loading: true, data: undefined }, void 0));
+        // Then the form is marked as loading
+        expect(r.loading()).toHaveTextContent("true");
+        // And when the query is not loading
+        await r.rerender(jsx_runtime_1.jsx(TestComponent, { loading: false, data: { firstName: "first" } }, void 0));
+        // Then the form is marked as not loading
+        expect(r.loading()).toHaveTextContent("false");
+    });
 });
 const authorConfig = {
     id: { type: "value" },
@@ -468,7 +513,7 @@ const authorWithBooksConfig = {
         type: "list",
         config: {
             id: { type: "value" },
-            title: { type: "value", rules: [formState_1.required] },
+            title: { type: "value", rules: [rules_1.required] },
             classification: { type: "value" },
         },
     },
@@ -481,7 +526,7 @@ const authorWithAddressAndBooksConfig = {
         type: "object",
         config: {
             id: { type: "value" },
-            street: { type: "value", rules: [formState_1.required] },
+            street: { type: "value", rules: [rules_1.required] },
             city: { type: "value" },
         },
     },
@@ -489,7 +534,7 @@ const authorWithAddressAndBooksConfig = {
         type: "list",
         config: {
             id: { type: "value" },
-            title: { type: "value", rules: [formState_1.required] },
+            title: { type: "value", rules: [rules_1.required] },
             classification: { type: "value" },
         },
     },

package/dist/useFormStates.d.ts

@@ -1,4 +1,5 @@
-import { ObjectConfig, ObjectState } from "./formState";
+import { ObjectConfig } from "./config";
+import { ObjectState } from "./fields/objectField";
 export declare type ObjectStateCache<T, I> = Record<string, [ObjectState<T>, I]>;
 declare type UseFormStatesOpts<T, I> = {
     /**

package/dist/useFormStates.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFormStates = void 0;
 const react_1 = require("react");
-const formState_1 = require("./formState");
+const objectField_1 = require("./fields/objectField");
 const utils_1 = require("./utils");
 function useFormStates(opts) {
     const { config, autoSave, getId, map, addRules, readOnly = false } = opts;
@@ -49,7 +49,7 @@ function useFormStates(opts) {
         }
         // If it didn't exist, then add to the cache.
         if (!form) {
-            form = formState_1.createObjectState(config, utils_1.initValue(config, map ? { map, input } : input), {
+            form = objectField_1.createObjectState(config, utils_1.initValue(config, map ? { map, input } : input), {
                 maybeAutoSave: () => maybeAutoSave(form),
             });
             if (addRules) {

package/dist/useFormStates.test.js

@@ -4,8 +4,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const rtl_utils_1 = require("@homebound/rtl-utils");
 const mobx_1 = require("mobx");
 const react_1 = require("react");
-const formState_1 = require("./formState");
 const FormStateApp_1 = require("./FormStateApp");
+const rules_1 = require("./rules");
 const useFormStates_1 = require("./useFormStates");
 describe("useFormStates", () => {
     it("can lazily create form states", async () => {
@@ -114,7 +114,7 @@ describe("useFormStates", () => {
         const originalConfig = { id: { type: "value" }, firstName: { type: "value" } };
         const updatedConfig = {
             id: { type: "value" },
-            firstName: { type: "value", rules: [formState_1.required] },
+            firstName: { type: "value", rules: [rules_1.required] },
         };
         function TestComponent() {
             const [config, setConfig] = react_1.useState(originalConfig);
@@ -148,7 +148,7 @@ describe("useFormStates", () => {
                     jsx_runtime_1.jsx(ChildComponent, { os: getFormState({ id: "a:1", firstName: "Brandon" }) }, void 0)] }, void 0));
         }
         // When we render
-        const r = await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
+        await rtl_utils_1.render(jsx_runtime_1.jsx(TestComponent, {}, void 0));
         // Then addRules was only called once
         expect(addRules).toHaveBeenCalledTimes(1);
     });

package/dist/utils.d.ts

@@ -1,8 +1,19 @@
-import { ObjectConfig } from "./formState";
+import { ObjectConfig } from "./config";
+import { InputAndMap, QueryAndMap, UseFormStateOpts } from "./useFormState";
+export declare type Builtin = Date | Function | Uint8Array | string | number | boolean;
+export declare type Primitive = undefined | null | boolean | string | number | Function | Date | {
+    toJSON(): any;
+};
+/** Makes the keys in `T` required while keeping the values undefined. */
+export declare type DeepRequired<T> = T extends Primitive ? T : {
+    [P in keyof Required<T>]: T[P] extends Array<infer U> ? Array<DeepRequired<U>> : T[P] extends ReadonlyArray<infer U2> ? ReadonlyArray<DeepRequired<U2>> : DeepRequired<T[P]>;
+};
 export declare function fail(message?: string): never;
 export declare function assertNever(x: never): never;
 /** Introspects the `init` prop to see if has a `map` function/etc. and returns the form value. */
 export declare function initValue<T>(config: ObjectConfig<T>, init: any): T;
+export declare function isInput<T, I>(init: UseFormStateOpts<T, I>["init"]): init is InputAndMap<T, I>;
+export declare function isQuery<T, I>(init: UseFormStateOpts<T, I>["init"]): init is QueryAndMap<T, I>;
 /**
  * Picks ony fields out of `instance` that are in the `formConfig`.
  *
@@ -15,3 +26,18 @@ export declare function initValue<T>(config: ObjectConfig<T>, init: any): T;
 export declare function pickFields<T, I>(formConfig: ObjectConfig<T>, instance: I): {
     [K in keyof T]: K extends keyof I ? I[K] : never;
 };
+export declare function isNotUndefined<T>(value: T | undefined): value is T;
+export declare function isEmpty(value: any): boolean;
+/**
+ * An equals that does deep-ish equality.
+ *
+ * We only do non-identity equals for:
+ *
+ * - "plain" objects that have no custom prototype/i.e. are object literals
+ * - objects that implement `toJSON`
+ *
+ */
+export declare function areEqual<T>(a?: T, b?: T): boolean;
+export declare function hasToJSON(o?: unknown): o is {
+    toJSON(): void;
+};

package/dist/utils.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pickFields = exports.initValue = exports.assertNever = exports.fail = void 0;
+exports.hasToJSON = exports.areEqual = exports.isEmpty = exports.isNotUndefined = exports.pickFields = exports.isQuery = exports.isInput = exports.initValue = exports.assertNever = exports.fail = void 0;
+const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
 const is_plain_object_1 = require("is-plain-object");
 const mobx_1 = require("mobx");
 function fail(message) {
@@ -13,14 +17,27 @@ function assertNever(x) {
 exports.assertNever = assertNever;
 /** Introspects the `init` prop to see if has a `map` function/etc. and returns the form value. */
 function initValue(config, init) {
-    const initValue = init && "input" in init && "map" in init
-        ? init.input
-            ? init.map(init.input)
-            : init.ifUndefined || {}
-        : init || {};
-    return pickFields(config, initValue);
+    let value;
+    if (isInput(init)) {
+        value = init.input ? init.map(init.input) : init.ifUndefined;
+    }
+    else if (isQuery(init)) {
+        value = init.query.data ? init.map(init.query.data) : init.ifUndefined;
+    }
+    else {
+        value = init;
+    }
+    return pickFields(config, value !== null && value !== void 0 ? value : {});
 }
 exports.initValue = initValue;
+function isInput(init) {
+    return !!init && "input" in init && "map" in init;
+}
+exports.isInput = isInput;
+function isQuery(init) {
+    return !!init && "query" in init && "map" in init;
+}
+exports.isQuery = isQuery;
 /**
  * Picks ony fields out of `instance` that are in the `formConfig`.
  *
@@ -68,3 +85,39 @@ function pickFields(formConfig, instance) {
     }));
 }
 exports.pickFields = pickFields;
+function isNotUndefined(value) {
+    return value !== undefined;
+}
+exports.isNotUndefined = isNotUndefined;
+function isEmpty(value) {
+    return value === undefined || value === null || value === "";
+}
+exports.isEmpty = isEmpty;
+/**
+ * An equals that does deep-ish equality.
+ *
+ * We only do non-identity equals for:
+ *
+ * - "plain" objects that have no custom prototype/i.e. are object literals
+ * - objects that implement `toJSON`
+ *
+ */
+function areEqual(a, b) {
+    if (is_plain_object_1.isPlainObject(a)) {
+        return fast_deep_equal_1.default(mobx_1.toJS(a), mobx_1.toJS(b));
+    }
+    if (hasToJSON(a) || hasToJSON(b)) {
+        const a1 = hasToJSON(a) ? a.toJSON() : a;
+        const b1 = hasToJSON(b) ? b.toJSON() : b;
+        return fast_deep_equal_1.default(a1, b1);
+    }
+    if (a && b && a instanceof Array && b instanceof Array) {
+        return fast_deep_equal_1.default(a, b);
+    }
+    return a === b;
+}
+exports.areEqual = areEqual;
+function hasToJSON(o) {
+    return !!(o && typeof o === "object" && "toJSON" in o);
+}
+exports.hasToJSON = hasToJSON;

package/dist/utils.test.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const mobx_1 = require("mobx");
-const formState_1 = require("./formState");
+const rules_1 = require("./rules");
 const utils_1 = require("./utils");
 describe("utils", () => {
     describe("pickFields", () => {
@@ -82,7 +82,7 @@ const authorWithAddressConfig = {
     address: {
         type: "object",
         config: {
-            street: { type: "value", rules: [formState_1.required] },
+            street: { type: "value", rules: [rules_1.required] },
             city: { type: "value" },
         },
     },
@@ -95,7 +95,7 @@ const authorWithBooksConfig = {
         type: "list",
         config: {
             id: { type: "value" },
-            title: { type: "value", rules: [formState_1.required] },
+            title: { type: "value", rules: [rules_1.required] },
             classification: { type: "value" },
         },
     },

package/package.json

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

package/dist/formState.d.ts

@@ -1,192 +0,0 @@
-/**
- * Wraps a given input/on-the-wire type `T` for editing in a form.
- *
- * We basically mimic every field in `T` (i.e. `firstName`, `lastName`, etc.) but decorate them
- * with form-specific state like `touched`, `dirty`, `errors`, etc.
- *
- * The intent is that, after ensuring all fields are `valid`/etc., callers can take the
- * result of this `objectState.value` (or `objectState.originalValue` for the non-proxy version) and
- * have exactly the on-the-wire type `T` that they need to submit to the backend, without doing the
- * manual mapping of "data that was in the form controls" into "data that the backend wants".
- *
- * Note that this can be hierarchical by having by having a field of `ListFieldState` that
- * themselves each wrap an `ObjectState`, i.e.:
- *
- * ```
- * ObjectState for author
- *   - firstName: FieldState
- *   - lastName: FieldState
- *   - rows: ListFieldState
- *     - [0]: ObjectState for book 1
- *       - title: FieldState
- *     - [1]: ObjectState for book 2
- *       - title: FieldState
- * ```
- */
-export declare type ObjectState<T, P = any> = FieldStates<T> & FieldState<P, 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. */
-    canSave(): boolean;
-};
-export declare type Builtin = Date | Function | Uint8Array | string | number | boolean;
-/** 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>;
-};
-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: {
-    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;
-/**
- * Form state for a primitive field in the form, i.e. its value but also touched/validation/etc. state.
- *
- * This API also provides hooks for form elements to call into, i.e. `blur()` and `set(...)` that will
- * update the field state and re-render, i.e. when including in an `ObjectState`-typed literal that is
- * an mobx `useLocalObservable`/observable.
- *
- * 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> {
-    readonly key: string;
-    value: V;
-    readonly originalValue: V;
-    touched: boolean;
-    readOnly: boolean;
-    readonly required: boolean;
-    readonly dirty: boolean;
-    readonly valid: boolean;
-    readonly isNewEntity: boolean;
-    rules: Rule<T, V>[];
-    readonly errors: string[];
-    /** Returns a subset of V with only the changed values. Currently not observable. */
-    readonly changedValue: V;
-    /** Focuses the field. Disables changes from `ObjectState.set` calls. */
-    focus(): void;
-    /** Blur marks the field as touched and triggers an auto-save. */
-    blur(): void;
-    /** Triggers an auto-save; the caller (i.e. useFormState) should still dirty & valid check. */
-    maybeAutoSave(): void;
-    set(value: V, opts?: SetOpts): void;
-    /** Reverts back to the original value and resets dirty/touched. */
-    reset(): void;
-    /** Accepts the current changed value (if any) as the original and resets dirty/touched. */
-    save(): void;
-}
-/** Public options for our `set` command. */
-export interface SetOpts {
-    /** Whether this `set` should trigger an auto-save; defaults to true. */
-    autoSave?: boolean;
-}
-/** Internal `.set` opts for conditionally that form-state internally percolates. */
-interface InternalSetOpts extends SetOpts {
-    /** `resetting` is the code calling `.reset()` to revert to original values. */
-    resetting?: boolean;
-    /** `refreshing` is when `useFormState` sees a new value. */
-    refreshing?: boolean;
-}
-export interface FieldStateInternal<T, V> extends FieldState<T, V> {
-    set(value: V, opts?: InternalSetOpts): void;
-    _isIdKey: boolean;
-    _isDeleteKey: boolean;
-    _isReadOnlyKey: boolean;
-    _focused: boolean;
-}
-export declare type ObjectStateInternal<T, P = any> = ObjectState<T, P> & {
-    set(value: P, opts?: InternalSetOpts): void;
-};
-/** 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"> {
-    readonly rows: ReadonlyArray<ObjectState<U>>;
-    add(value: U, index?: number): void;
-    remove(indexOrValue: number | U): void;
-}
-/**
- * Config rules for each field in `T` that we're editing in a form.
- *
- * Basically every field is either a value/primitive or a list, and this `ObjectConfig` lets
- * 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]>;
-};
-declare type OmitIf<Base, Condition> = Pick<Base, {
-    [Key in keyof Base]: Base[Key] extends Condition ? never : Key;
-}[keyof Base]>;
-/** 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>[];
-    /**
-     * If true, marks this field as the id, which will be used for things like "always include in changedValue".
-     *
-     * Defaults to true for fields named `id`.
-     */
-    isIdKey?: boolean;
-    /** If true, and this value is used on an entity in a list, the entity won't count towards the list validity. */
-    isDeleteKey?: boolean;
-    /** If true, the entity that contains this value will be treated as read only. */
-    isReadOnlyKey?: boolean;
-    /**
-     * Marks a field as being backed by a mobx class computed field.
-     *
-     * Note that it might still be settable (some computed have setters), but we do
-     * exclude from the `reset` operation, i.e. we assume resetting other non-computed fields
-     * will effectively reset this field as well.
-     */
-    computed?: boolean;
-    /** Marks a field as being initiallyread-only, i.e. `field.readOnly = true/false` can change this default. */
-    readOnly?: boolean;
-};
-/** Field configuration for list values, i.e. `U` is `Book` in a form with `books: Book[]`. */
-export declare type ListFieldConfig<T, U> = {
-    type: "list";
-    /** Rules that can run on the full list of children. */
-    rules?: Rule<T, readonly ObjectState<U>[]>[];
-    /** Config for each child's form state, i.e. each book. */
-    config: ObjectConfig<U>;
-    /**
-     * What the server-side update behavior is for this collection.
-     *
-     * When exhaustive, we include all rows in `changedValue` so that we
-     * don't orhan unchanged rows.
-     *
-     * When incremental, we only include changed rows in `changedValue`.
-     *
-     * Defaults to `exhaustive` b/c that is the safest and also Joist's
-     * default behavior.
-     */
-    update?: "exhaustive" | "incremental";
-};
-export declare type ObjectFieldConfig<U> = {
-    type: "object";
-    /** Config for the child's form state, i.e. each book. */
-    config: ObjectConfig<U>;
-};
-/**
- * Creates a new `ObjectState` for a given form object `T` given config rules in `config`.
- *
- * The returned `ObjectState` can be used in a mobx `useLocalObservable` to driven an
- * interactive form that tracks the current valid/touched/etc. state of both each
- * individual fields as well as the top-level form/object itself.
- */
-export declare function createObjectState<T>(config: ObjectConfig<T>, instance: T, opts?: {
-    maybeAutoSave?: () => void;
-}): ObjectState<T>;
-declare type Primitive = undefined | null | boolean | string | number | Function | Date | {
-    toJSON(): any;
-};
-/** Makes the keys in `T` required while keeping the values undefined. */
-export declare type DeepRequired<T> = T extends Primitive ? T : {
-    [P in keyof Required<T>]: T[P] extends Array<infer U> ? Array<DeepRequired<U>> : T[P] extends ReadonlyArray<infer U2> ? ReadonlyArray<DeepRequired<U2>> : DeepRequired<T[P]>;
-};
-export {};