@homebound/form-state 2.24.0 → 2.25.1

package/dist/fields/deepEquals.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Our own `deepEquals` because either `fast-deep-equals` or `dequal` or etc actually
+ * handle cyclic data structures, despite ChatGTP's assertions/hallucinations.
+ *
+ * Ported from https://github.com/KoryNunn/cyclic-deep-equal which is ISC.
+ */
+export declare function deepEquals(a: any, b: any, visited?: Set<any>): boolean;

package/dist/fields/deepEquals.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deepEquals = void 0;
+/**
+ * Our own `deepEquals` because either `fast-deep-equals` or `dequal` or etc actually
+ * handle cyclic data structures, despite ChatGTP's assertions/hallucinations.
+ *
+ * Ported from https://github.com/KoryNunn/cyclic-deep-equal which is ISC.
+ */
+function deepEquals(a, b, visited = new Set()) {
+    const aType = typeof a;
+    if (aType !== typeof b)
+        return false;
+    if (a == null || b == null || !(aType === "object" || aType === "function")) {
+        if (aType === "number" && isNaN(a) && isNaN(b))
+            return true;
+        return a === b;
+    }
+    if (Array.isArray(a) !== Array.isArray(b))
+        return false;
+    const aKeys = Object.keys(a), bKeys = Object.keys(b);
+    if (aKeys.length !== bKeys.length)
+        return false;
+    let equal = true;
+    for (const key of aKeys) {
+        if (!(key in b)) {
+            equal = false;
+            break;
+        }
+        if (a[key] && a[key] instanceof Object) {
+            if (visited.has(a[key]))
+                break;
+            visited.add(a[key]);
+        }
+        if (!deepEquals(a[key], b[key], visited)) {
+            equal = false;
+            break;
+        }
+    }
+    return equal;
+}
+exports.deepEquals = deepEquals;

package/dist/formState.stories.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, import("@storybook/types").Args>;
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0fc72a6d").R, import("@storybook/types").Args>;
 export default _default;
 export declare function AppExample(): import("react/jsx-runtime").JSX.Element;

package/dist/formState.test.js

@@ -1468,6 +1468,22 @@ describe("formState", () => {
         a.address.set({ street: "123", city: "nyc" });
         expect(a.value).toEqual({ address: { street: "123", city: "nyc" } });
     });
+    it("can have child object states with cycles", () => {
+        // Given an author with an address child
+        // And two addresses that are basically identical and both have cycles
+        const address1 = { city: "city2" };
+        address1.someCycle = address1;
+        const address2 = { city: "city2" };
+        address2.someCycle = address2;
+        const a = (0, objectField_1.createObjectState)({
+            id: { type: "value" },
+            address: { type: "value" },
+        }, { address: address1 });
+        // When we change the address
+        a.address.set(address2);
+        // Then it doesn't error on dirty checks
+        expect(a.address.dirty).toBe(false);
+    });
     it("provides isNewEntity", () => {
         // Given an author without an id
         const formState = (0, objectField_1.createObjectState)(authorWithAddressConfig, {

package/dist/useFormState.js

@@ -39,7 +39,12 @@ function useFormState(opts) {
                 return;
             }
             // Don't use canSave() because we don't want to set touched for all the fields
-            if (autoSaveRef.current && form.dirty && form.valid && !isAutoSaving) {
+            if (autoSaveRef.current && form.dirty && !isAutoSaving) {
+                // It's very frustrating to not know why the form is savings, to go ahead and log these
+                if (!form.valid) {
+                    console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+                    return;
+                }
                 isAutoSaving = "queued";
                 let maybeError;
                 // We use setTimeout as a cheap way to wait until the end of the current event listener

package/dist/useFormStates.js

@@ -35,8 +35,13 @@ function useFormStates(opts) {
         const existing = objectStateCache[getId(input)];
         let form = existing === null || existing === void 0 ? void 0 : existing[0];
         async function maybeAutoSave(form) {
-            // Don't use canSave() because we don't want to set touched for all the fields
-            if (autoSaveRef.current && form.dirty && form.valid) {
+            // Don't use form.canSave() because we don't want to set touched for all the fields
+            if (autoSaveRef.current && form.dirty) {
+                // It's very frustrating to not know why the form is savings, to go ahead and log these
+                if (!form.valid) {
+                    console.debug("Skipping auto-save b/c form is invalid: ", form.errors);
+                    return;
+                }
                 const { current: pending } = pendingAutoSaves;
                 if (isAutoSaving) {
                     pending.add(form);

package/dist/utils.js

@@ -1,12 +1,9 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.deepClone = 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");
+const deepEquals_1 = require("./fields/deepEquals");
 function fail(message) {
     throw new Error(message || "Failed");
 }
@@ -108,16 +105,16 @@ exports.isEmpty = isEmpty;
  */
 function areEqual(a, b, strictOrder) {
     if ((0, is_plain_object_1.isPlainObject)(a)) {
-        return (0, fast_deep_equal_1.default)((0, mobx_1.toJS)(a), (0, mobx_1.toJS)(b));
+        return (0, deepEquals_1.deepEquals)((0, mobx_1.toJS)(a), (0, mobx_1.toJS)(b));
     }
     if (hasToJSON(a) || hasToJSON(b)) {
         const a1 = hasToJSON(a) ? a.toJSON() : a;
         const b1 = hasToJSON(b) ? b.toJSON() : b;
-        return (0, fast_deep_equal_1.default)(a1, b1);
+        return (0, deepEquals_1.deepEquals)(a1, b1);
     }
     if (a && b && a instanceof Array && b instanceof Array) {
         if (strictOrder !== false) {
-            return (0, fast_deep_equal_1.default)(a, b);
+            return (0, deepEquals_1.deepEquals)(a, b);
         }
         if (a.length !== b.length)
             return false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/form-state",
-  "version": "2.24.0",
+  "version": "2.25.1",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",
@@ -30,7 +30,6 @@
     "src/**/*.{ts,tsx,css,md}": "prettier --write"
   },
   "dependencies": {
-    "fast-deep-equal": "^3.1.3",
     "is-plain-object": "^5.0.0"
   },
   "peerDependencies": {
@@ -42,17 +41,17 @@
     "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
     "@babel/preset-typescript": "^7.22.15",
-    "@homebound/rtl-utils": "2.65.0",
+    "@homebound/rtl-utils": "2.65.2",
     "@semantic-release/exec": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/addons": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-webpack5": "^7.4.0",
-    "@testing-library/dom": "^9.3.1",
-    "@testing-library/jest-dom": "^6.1.3",
-    "@testing-library/react": "^14.0.0",
+    "@storybook/addon-essentials": "^7.6.5",
+    "@storybook/addon-links": "^7.6.5",
+    "@storybook/addons": "^7.6.5",
+    "@storybook/react": "^7.6.5",
+    "@storybook/react-webpack5": "^7.6.5",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
     "@tsconfig/recommended": "^1.0.2",
     "@types/jest": "^29.5.4",
     "@types/react": "^18.2.21",
@@ -71,7 +70,7 @@
     "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^3.1.0",
-    "jest": "^29.6.4",
+    "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.6.4",
     "lint-staged": "^14.0.1",
     "mobx": "^6.10.2",
@@ -80,13 +79,13 @@
     "prettier-plugin-organize-imports": "^3.2.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "semantic-release": "^21.1.1",
-    "storybook": "^7.4.0",
+    "semantic-release": "^22.0.12",
+    "storybook": "^7.6.5",
     "ts-jest": "^29.1.1",
-    "ts-node": "^10.9.1",
-    "ts-patch": "^3.0.2",
+    "ts-node": "^10.9.2",
+    "ts-patch": "^3.1.1",
     "tslib": "^2.6.2",
-    "typescript": "^5.2.2",
+    "typescript": "^5.3.3",
     "typescript-transform-paths": "^3.4.6"
   },
   "packageManager": "yarn@3.6.3"