@koordinates/xstate-tree 2.0.3 → 2.0.5

package/LICENSE

@@ -1,8 +1,12 @@
 The MIT License (MIT)
-Copyright © 2022 Koordinates
+Copyright © 2022 Koordinates Limited
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the
+Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software,
+and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 
 The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
 
-THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
+PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
+CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/lib/routing/createRoute/createRoute.js

@@ -1,6 +1,6 @@
-import { isNil } from "lodash";
 import { match, compile } from "path-to-regexp";
 import { parse, stringify } from "query-string";
+import { isNil } from "../../utils";
 import { joinRoutes } from "../joinRoutes";
 /**
  * @public

package/lib/testingUtilities.js

@@ -1,10 +1,10 @@
 // ignore file coverage
 import { useMachine } from "@xstate/react";
-import { transform, isEqual, isObject, isNil } from "lodash";
 import React, { useEffect } from "react";
 import { TinyEmitter } from "tiny-emitter";
 import { createMachine, } from "xstate";
 import { buildXStateTreeMachine } from "./builders";
+import { difference } from "./utils";
 import { emitter, recursivelySend, XstateTreeView } from "./xstateTree";
 /**
  * @public
@@ -115,25 +115,3 @@ export function buildTestRootComponent(machine, logger) {
         },
     };
 }
-/**
- * Deep diff between two object, using lodash
- * @param  {Object} object Object compared
- * @param  {Object} base   Object to compare with
- * @return {Object}        Return a new object who represent the diff
- */
-function difference(object, base) {
-    function changes(object, base) {
-        return transform(object, function (result, value, key) {
-            if (!isEqual(value, base[key])) {
-                result[key] =
-                    isObject(value) && isObject(base[key])
-                        ? changes(value, base[key])
-                        : value;
-            }
-        });
-    }
-    if (isNil(base)) {
-        return object;
-    }
-    return changes(object, base);
-}

package/lib/useService.js

@@ -1,5 +1,5 @@
-import { omit, isEqual } from "lodash";
 import { useState, useRef, useEffect } from "react";
+import { isEqual } from "./utils";
 /**
  * @public
  */
@@ -60,11 +60,7 @@ export function useService(service) {
         function transitionHandler(state) {
             var _a, _b;
             const ignoreContext = (_b = (_a = service.machine.meta) === null || _a === void 0 ? void 0 : _a.xstateTree) === null || _b === void 0 ? void 0 : _b.ignoreContext;
-            const context = ignoreContext
-                ? ignoreContext.length > 0
-                    ? omit(state.context, ignoreContext)
-                    : "[context omitted]"
-                : state.context;
+            const context = ignoreContext ? "[context omitted]" : state.context;
             if (prevState) {
                 console.debug(`[xstate-tree] ${service.id} transitioning from`, prevState.value, "to", state.value, context);
             }

package/lib/utils.js

@@ -28,3 +28,148 @@ export function isLikelyPageLoad() {
     // if it's been < 5 seconds since the page was loaded, it's probably a page load
     return performance.now() < 5000;
 }
+/*
+ * @private
+ *
+ * Find the differences between two objects and push to a new object
+ * (c) 2019 Chris Ferdinandi & Jascha Brinkmann, MIT License, https://gomakethings.com & https://twitter.com/jaschaio
+ * @param  {Object} obj1 The original object
+ * @param  {Object} obj2 The object to compare against it
+ * @return {Object}      An object of differences between the two
+ */
+export function difference(obj1, obj2) {
+    if (!obj2 || Object.prototype.toString.call(obj2) !== "[object Object]") {
+        return obj1;
+    }
+    const diffs = {};
+    let key;
+    /**
+     * Check if two arrays are equal
+     * @param  {Array}   arr1 The first array
+     * @param  {Array}   arr2 The second array
+     * @return {Boolean}      If true, both arrays are equal
+     */
+    const arraysMatch = function arraysMatch(arr1, arr2) {
+        if (arr1.length !== arr2.length)
+            return false;
+        for (let i = 0; i < arr1.length; i++) {
+            if (arr1[i] !== arr2[i])
+                return false;
+        }
+        return true;
+    };
+    /**
+     * Compare two items and push non-matches to object
+     * @param  {*}      item1 The first item
+     * @param  {*}      item2 The second item
+     * @param  {String} key   The key in our object
+     */
+    function compare(item1, item2, key) {
+        const type1 = Object.prototype.toString.call(item1);
+        const type2 = Object.prototype.toString.call(item2);
+        if (type2 === "[object Undefined]") {
+            diffs[key] = null;
+            return;
+        }
+        if (type1 !== type2) {
+            diffs[key] = item2;
+            return;
+        }
+        if (type1 === "[object Object]") {
+            const objDiff = difference(item1, item2);
+            if (Object.keys(objDiff).length > 0) {
+                diffs[key] = objDiff;
+            }
+            return;
+        }
+        if (type1 === "[object Array]") {
+            if (!arraysMatch(item1, item2)) {
+                diffs[key] = item2;
+            }
+            return;
+        }
+        if (type1 === "[object Function]") {
+            if (item1.toString() !== item2.toString()) {
+                diffs[key] = item2;
+            }
+        }
+        else {
+            if (item1 !== item2) {
+                diffs[key] = item2;
+            }
+        }
+    }
+    for (key in obj1) {
+        if (obj1.hasOwnProperty(key)) {
+            compare(obj1[key], obj2[key], key);
+        }
+    }
+    for (key in obj2) {
+        if (obj2.hasOwnProperty(key)) {
+            if (!obj1[key] && obj1[key] !== obj2[key]) {
+                diffs[key] = obj2[key];
+            }
+        }
+    }
+    return diffs;
+}
+/*
+ * @private
+ *
+ * Check if two objects or arrays are equal
+ * (c) 2021 Chris Ferdinandi, MIT License, https://gomakethings.com
+ * @param  {*}       obj1 The first item
+ * @param  {*}       obj2 The second item
+ * @return {Boolean}       Returns true if they're equal in value
+ */
+export function isEqual(obj1, obj2) {
+    /**
+     * More accurately check the type of a JavaScript object
+     * @param  {Object} obj The object
+     * @return {String}     The object type
+     */
+    function getType(obj) {
+        return Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+    }
+    function areArraysEqual() {
+        if (obj1.length !== obj2.length)
+            return false;
+        for (let i = 0; i < obj1.length; i++) {
+            if (!isEqual(obj1[i], obj2[i]))
+                return false;
+        }
+        return true;
+    }
+    function areObjectsEqual() {
+        if (Object.keys(obj1).length !== Object.keys(obj2).length)
+            return false;
+        for (const key in obj1) {
+            if (Object.prototype.hasOwnProperty.call(obj1, key)) {
+                if (!isEqual(obj1[key], obj2[key]))
+                    return false;
+            }
+        }
+        return true;
+    }
+    function areFunctionsEqual() {
+        return obj1.toString() === obj2.toString();
+    }
+    function arePrimitivesEqual() {
+        return obj1 === obj2;
+    }
+    const type = getType(obj1);
+    if (type !== getType(obj2))
+        return false;
+    if (type === "array")
+        return areArraysEqual();
+    if (type === "object")
+        return areObjectsEqual();
+    if (type === "function")
+        return areFunctionsEqual();
+    return arePrimitivesEqual();
+}
+export function isNil(
+// eslint-disable-next-line @rushstack/no-new-null
+value) {
+    return value === null || value === undefined;
+}

package/lib/xstateTree.js

@@ -1,6 +1,5 @@
 import { useMachine } from "@xstate/react";
 import memoize from "fast-memoize";
-import { reduce } from "lodash";
 import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import { TinyEmitter } from "tiny-emitter";
 import { handleLocationChange, RoutingContext, } from "./routing";
@@ -64,7 +63,7 @@ const getMultiSlotViewForChildren = memoize((parent, slot) => {
 });
 function useSlots(interpreter, slots) {
     return useConstant(() => {
-        return reduce(slots, (views, slot) => {
+        return slots.reduce((views, slot) => {
             return {
                 ...views,
                 [slot]: () => {

package/package.json

@@ -2,53 +2,70 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "2.0.3",
+  "version": "2.0.5",
+  "license": "MIT",
+  "description": "Build UIs with Actors using xstate and React",
+  "keywords": [
+    "react",
+    "javascript",
+    "typescript",
+    "ui",
+    "actors",
+    "state-machine",
+    "actor-model",
+    "xstate"
+  ],
+  "homepage": "https://github.com/koordinates/xstate-tree/",
+  "bugs": {
+    "url": "https://github.com/koordinates/xstate-tree/issues/"
+  },
   "dependencies": {
-    "@xstate/react": "3.0.0",
-    "fast-memoize": "2.5.2",
-    "history": "4.10.1",
-    "lodash": "4.17.21",
-    "path-to-regexp": "6.2.0",
-    "query-string": "6.12.1",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
-    "rxjs": "6.6.2",
-    "tiny-emitter": "2.1.0",
-    "typescript": "4.7.3"
+    "fast-memoize": "^2.5.2",
+    "path-to-regexp": "^6.2.0",
+    "query-string": "^6.12.1",
+    "tiny-emitter": "^2.1.0"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "7.28.4",
-    "@rushstack/eslint-config": "2.6.0",
+    "@commitlint/cli": "^17.1.2",
+    "@commitlint/config-conventional": "^17.1.0",
+    "@microsoft/api-extractor": "^7.28.4",
+    "@rushstack/eslint-config": "^2.6.0",
     "@saithodev/semantic-release-backmerge": "^2.1.2",
-    "@testing-library/dom": "8.14.0",
-    "@testing-library/jest-dom": "5.16.1",
-    "@testing-library/react": "10.4.8",
-    "@testing-library/user-event": "13.5.0",
-    "@types/history": "4.7.7",
-    "@types/jest": "28.1.4",
-    "@types/lodash": "4.14.180",
-    "@types/react": "17.0.29",
-    "@types/react-dom": "18.0.6",
-    "@types/testing-library__jest-dom": "5.14.1",
-    "@typescript-eslint/eslint-plugin": "5.30.5",
-    "classnames": "2.3.1",
+    "@testing-library/dom": "^8.14.0",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^10.4.8",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/history": "^4.7.7",
+    "@types/jest": "^28.1.4",
+    "@types/react": "^17.0.29",
+    "@types/react-dom": "^18.0.6",
+    "@types/testing-library__jest-dom": "^5.14.1",
+    "@typescript-eslint/eslint-plugin": "^5.30.5",
+    "@xstate/react": "^3.0.0",
+    "classnames": "^2.3.1",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "7.32.0",
-    "eslint-import-resolver-typescript": "2.7.1",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-prettier": "4.2.1",
-    "eslint-plugin-react-hooks": "4.3.0",
-    "jest": "28.0.3",
-    "jest-environment-jsdom": "28.0.1",
-    "rimraf": "3.0.2",
-    "semantic-release": "19.0.3",
+    "eslint": "^7.32.0",
+    "eslint-import-resolver-typescript": "^2.7.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
+    "history": "^4.10.1",
+    "husky": "^8.0.1",
+    "jest": "^28.0.3",
+    "jest-environment-jsdom": "^28.0.1",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "rimraf": "^3.0.2",
+    "semantic-release": "^19.0.3",
     "semantic-release-npm-github-publish": "^1.5.1",
-    "ts-jest": "28.0.5",
-    "xstate": "4.32.0"
+    "ts-jest": "^28.0.5",
+    "typescript": "^4.7.3",
+    "xstate": "^4.32.0"
   },
   "peerDependencies": {
+    "@xstate/react": "^3.x",
     "xstate": ">= 4.20 < 5.0.0",
-    "zod": "3.x"
+    "zod": "^3.x"
   },
   "scripts": {
     "lint": "eslint 'src/**/*'",