@koordinates/xstate-tree 1.0.0-beta.1

package/lib/xstateTree.js

@@ -0,0 +1,204 @@
+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";
+import { useActiveRouteEvents } from "./routing/providers";
+import { useConstant } from "./useConstant";
+import { useService } from "./useService";
+export const emitter = new TinyEmitter();
+/**
+ * @public
+ */
+export function broadcast(event) {
+    console.debug("[xstate-tree] broadcasting event ", event.type);
+    emitter.emit("event", event);
+}
+/**
+ * @public
+ */
+export function onBroadcast(handler) {
+    emitter.on("event", handler);
+    return () => {
+        emitter.off("event", handler);
+    };
+}
+function cacheKeyForInterpreter(
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+interpreter) {
+    return interpreter.sessionId;
+}
+const getViewForInterpreter = memoize((interpreter) => {
+    return React.memo(function InterpreterView() {
+        const activeRouteEvents = useActiveRouteEvents();
+        useEffect(() => {
+            if (activeRouteEvents) {
+                activeRouteEvents.forEach((event) => {
+                    if (interpreter.state.nextEvents.includes(event.type)) {
+                        interpreter.send(event);
+                    }
+                });
+            }
+        }, []);
+        return React.createElement(XstateTreeView, { interpreter: interpreter });
+    });
+}, 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+{ serializer: cacheKeyForInterpreter });
+const getMultiSlotViewForChildren = memoize((parent, slot) => {
+    return React.memo(function MultiSlotView() {
+        const [_, children] = useService(parent);
+        const interpreters = [...children.values()];
+        // Once the interpreter is stopped, initialized gets set to false
+        // We don't want to render stopped interpreters
+        const interpretersWeCareAbout = interpreters.filter((i) => i.id.includes(slot) && i.initialized);
+        return (React.createElement(XstateTreeMultiSlotView, { childInterpreters: interpretersWeCareAbout }));
+    });
+}, {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    serializer: ((interpreter, slot) => 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    `${cacheKeyForInterpreter(interpreter)}-${slot}`),
+});
+function useSlots(interpreter, slots) {
+    return useConstant(() => {
+        return reduce(slots, (views, slot) => {
+            return {
+                ...views,
+                [slot]: () => {
+                    // eslint-disable-next-line react-hooks/rules-of-hooks
+                    const [__, children] = useService(interpreter);
+                    if (slot.toString().endsWith("s")) {
+                        const MultiView = getMultiSlotViewForChildren(interpreter, slot.toLowerCase());
+                        return React.createElement(MultiView, null);
+                    }
+                    else {
+                        const interpreterForSlot = children.get(`${slot.toLowerCase()}-slot`);
+                        if (interpreterForSlot) {
+                            const View = getViewForInterpreter(interpreterForSlot);
+                            return React.createElement(View, null);
+                        }
+                        else {
+                            // Waiting for the interpreter for this slot to be invoked
+                            return null;
+                        }
+                    }
+                },
+            };
+        }, {});
+    });
+}
+function XstateTreeMultiSlotView({ childInterpreters, }) {
+    return (React.createElement(React.Fragment, null, childInterpreters.map((i) => (React.createElement(XstateTreeView, { key: i.id, interpreter: i })))));
+}
+/**
+ * @internal
+ */
+export function XstateTreeView({ interpreter }) {
+    const [current] = useService(interpreter);
+    const currentRef = useRef(current);
+    currentRef.current = current;
+    const { view: View, actions: actionsFactory, selectors: selectorsFactory, slots: interpreterSlots, } = interpreter.machine.meta;
+    const slots = useSlots(interpreter, interpreterSlots.map((x) => x.name));
+    const canHandleEvent = useCallback((e) => {
+        return interpreter.nextState(e).changed ?? false;
+    }, [interpreter]);
+    const inState = useCallback((state) => {
+        return currentRef.current?.matches(state) ?? false;
+    }, 
+    // This is needed because the inState function needs to be recreated if the
+    // current state the machine is in changes. But _only_ then
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [current.value]);
+    if (!current) {
+        return null;
+    }
+    const selectors = selectorsFactory(current.context, canHandleEvent, inState, current.value);
+    const actions = actionsFactory(interpreter.send, selectors);
+    return (React.createElement(View, { selectors: selectors, actions: actions, slots: slots, inState: inState }));
+}
+/**
+ * @internal
+ */
+export function recursivelySend(service, event) {
+    const children = ([...service.children.values()] || []).filter((s) => s.id.includes("-slot"));
+    // If the service can't handle the event, don't send it
+    if (service.state.nextEvents.includes(event.type)) {
+        try {
+            service.send(event);
+        }
+        catch (e) {
+            console.error("Error sending event ", event, " to machine ", service.machine.id, e);
+        }
+    }
+    children.forEach((child) => recursivelySend(child, event));
+}
+/**
+ * @public
+ */
+export function buildRootComponent(machine, routing) {
+    if (!machine.meta) {
+        throw new Error("Root machine has no meta");
+    }
+    if (!machine.meta.view) {
+        throw new Error("Root machine has no associated view");
+    }
+    const RootComponent = function XstateTreeRootComponent() {
+        const [_, __, interpreter] = useMachine(machine, { devTools: true });
+        const [activeRouteEvents, setActiveRouteEvents] = useState(undefined);
+        const [forceRenderValue, forceRender] = useState(false);
+        useEffect(() => {
+            function handler(event) {
+                recursivelySend(interpreter, event);
+            }
+            emitter.on("event", handler);
+            return () => {
+                emitter.off("event", handler);
+            };
+        }, [interpreter]);
+        useEffect(() => {
+            if (routing) {
+                const { getPathName = () => window.location.pathname, getQueryString = () => window.location.search, } = routing;
+                const queryString = getQueryString();
+                handleLocationChange(routing.routes, routing.basePath, getPathName(), getQueryString(), setActiveRouteEvents);
+                // Hack to ensure the initial location doesn't have undefined state
+                // It's not supposed to, but it does for some reason
+                // And the history library ignores popstate events with undefined state
+                routing.history.replace(`${getPathName()}${queryString}`, {});
+            }
+        }, []);
+        useEffect(() => {
+            if (routing) {
+                const unsub = routing.history.listen((location) => {
+                    handleLocationChange(routing.routes, routing.basePath, location.pathname, location.search, setActiveRouteEvents, location.state?.meta);
+                });
+                return () => {
+                    unsub();
+                };
+            }
+            return undefined;
+        }, []);
+        const routingProviderValue = useMemo(() => {
+            if (!routing) {
+                return null;
+            }
+            return {
+                activeRouteEvents,
+            };
+        }, [activeRouteEvents]);
+        if (!interpreter.initialized) {
+            setTimeout(() => forceRender(!forceRenderValue), 0);
+            return null;
+        }
+        if (routingProviderValue) {
+            return (React.createElement(RoutingContext.Provider, { value: routingProviderValue },
+                React.createElement(XstateTreeView, { interpreter: interpreter })));
+        }
+        else {
+            return React.createElement(XstateTreeView, { interpreter: interpreter });
+        }
+    };
+    RootComponent.rootMachine = machine;
+    return RootComponent;
+}

package/package.json

@@ -0,0 +1,94 @@
+{
+  "name": "@koordinates/xstate-tree",
+  "main": "lib/index.js",
+  "types": "lib/xstate-tree.d.ts",
+  "version": "1.0.0-beta.1",
+  "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",
+    "xstate": "4.32.0",
+    "zod": "3.17.3"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "7.28.4",
+    "@rushstack/eslint-config": "2.6.0",
+    "@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",
+    "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",
+    "ts-jest": "28.0.5"
+  },
+  "scripts": {
+    "lint": "eslint 'src/**/*'",
+    "test": "jest",
+    "build": "rimraf dist && tsc -p tsconfig.build.json",
+    "build:watch": "tsc -p tsconfig.build.json -w",
+    "api-extractor": "api-extractor run"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/xstate-tree.d.ts",
+    "!lib/**/*.spec.js"
+  ],
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog",
+      "types": {
+        "build": {
+          "description": "Changes that affect the build system or external dependencies (example scopes: rollup, npm)"
+        },
+        "ci": {
+          "description": "Changes to our CI configuration files and scripts"
+        },
+        "docs": {
+          "description": "Changes to documentation"
+        },
+        "feat": {
+          "description": "A new feature"
+        },
+        "fix": {
+          "description": "Bug fixes"
+        },
+        "perf": {
+          "description": "A performance improvement"
+        },
+        "refactor": {
+          "description": "A code change that neither fixes a bug nor adds a feature"
+        },
+        "test": {
+          "description": "Adding or correcting tests"
+        },
+        "chore": {
+          "description": "Other changes that don't modify src or test files"
+        }
+      }
+    }
+  }
+}