@koordinates/xstate-tree 4.3.0 → 4.4.0-beta.2

package/lib/builders.js

@@ -3,8 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createXStateTreeMachine = exports.buildXStateTreeMachine = exports.buildView = exports.buildActions = exports.buildSelectors = void 0;
+exports.buildRoutingMachine = exports.viewToMachine = exports.createXStateTreeMachine = exports.buildXStateTreeMachine = exports.buildView = exports.buildActions = exports.buildSelectors = void 0;
 const react_1 = __importDefault(require("react"));
+const xstate_1 = require("xstate");
+const slots_1 = require("./slots");
 /**
  * @public
  *
@@ -148,3 +150,71 @@ function createXStateTreeMachine(machine, options) {
     return machine;
 }
 exports.createXStateTreeMachine = createXStateTreeMachine;
+/**
+ * @public
+ *
+ * Simple utility builder to aid in integrating existing React views with xstate-tree
+ *
+ * @param view - the React view you want to invoke in an xstate machine
+ * @returns The view wrapped into an xstate-tree machine, ready to be invoked by other xstate machines or used with `buildRootComponent`
+ */
+function viewToMachine(view) {
+    return createXStateTreeMachine((0, xstate_1.createMachine)({
+        initial: "idle",
+        states: { idle: {} },
+    }), {
+        View: view,
+    });
+}
+exports.viewToMachine = viewToMachine;
+/**
+ * @public
+ *
+ * Utility to aid in reducing boilerplate of mapping route events to xstate-tree machines
+ *
+ * Takes a list of routes and a mapping of route events to xstate-tree machines and returns an xstate-tree machine
+ * that renders the machines based on the routing events
+ *
+ * @param _routes - the array of routes you wish to map to machines
+ * @param mappings - an object mapping the route events to the machine to invoke
+ * @returns an xstate-tree machine that will render the right machines based on the routing events
+ */
+function buildRoutingMachine(_routes, mappings) {
+    const contentSlot = (0, slots_1.singleSlot)("Content");
+    const mappingsToStates = Object.entries(mappings).reduce((acc, [event, _machine]) => {
+        return {
+            ...acc,
+            [event]: {
+                invoke: {
+                    src: (_ctx, e) => {
+                        return mappings[e.type];
+                    },
+                    id: contentSlot.getId(),
+                },
+            },
+        };
+    }, {});
+    const mappingsToEvents = Object.keys(mappings).reduce((acc, event) => ({
+        ...acc,
+        [event]: {
+            target: `.${event}`,
+        },
+    }), {});
+    const machine = (0, xstate_1.createMachine)({
+        on: {
+            ...mappingsToEvents,
+        },
+        initial: "idle",
+        states: {
+            idle: {},
+            ...mappingsToStates,
+        },
+    });
+    return createXStateTreeMachine(machine, {
+        slots: [contentSlot],
+        View: ({ slots }) => {
+            return react_1.default.createElement(slots.Content, null);
+        },
+    });
+}
+exports.buildRoutingMachine = buildRoutingMachine;

package/lib/xstate-tree.d.ts

@@ -1,5 +1,5 @@
 import { AnyEventObject } from 'xstate';
-import type { AnyFunction } from 'xstate';
+import { AnyFunction } from 'xstate';
 import { AnyStateMachine } from 'xstate';
 import { BaseActionObject } from 'xstate';
 import { ComponentPropsWithRef } from 'react';
@@ -7,7 +7,7 @@ import { ContextFrom } from 'xstate';
 import { EventFrom } from 'xstate';
 import { EventObject } from 'xstate';
 import { History as History_2 } from 'history';
-import type { InterpreterFrom } from 'xstate';
+import { InterpreterFrom } from 'xstate';
 import { JSXElementConstructor } from 'react';
 import { ParsedQuery } from 'query-string';
 import { default as React_2 } from 'react';
@@ -182,6 +182,20 @@ export declare function buildRootComponent(machine: AnyXstateTreeMachine, routin
     rootMachine: AnyXstateTreeMachine;
 };
 
+/**
+ * @public
+ *
+ * Utility to aid in reducing boilerplate of mapping route events to xstate-tree machines
+ *
+ * Takes a list of routes and a mapping of route events to xstate-tree machines and returns an xstate-tree machine
+ * that renders the machines based on the routing events
+ *
+ * @param _routes - the array of routes you wish to map to machines
+ * @param mappings - an object mapping the route events to the machine to invoke
+ * @returns an xstate-tree machine that will render the right machines based on the routing events
+ */
+export declare function buildRoutingMachine<TRoutes extends AnyRoute[]>(_routes: TRoutes, mappings: Record<TRoutes[number]["event"], AnyXstateTreeMachine>): AnyXstateTreeMachine;
+
 /**
  * @public
  *
@@ -835,6 +849,16 @@ export declare type ViewProps<TSelectors, TActions, TSlots extends readonly Slot
     inState: TMatches;
 };
 
+/**
+ * @public
+ *
+ * Simple utility builder to aid in integrating existing React views with xstate-tree
+ *
+ * @param view - the React view you want to invoke in an xstate machine
+ * @returns The view wrapped into an xstate-tree machine, ready to be invoked by other xstate machines or used with `buildRootComponent`
+ */
+export declare function viewToMachine(view: () => JSX.Element): AnyXstateTreeMachine;
+
 /**
  * @public
  */

package/lib/xstateTree.js

@@ -74,6 +74,7 @@ const getViewForInterpreter = (0, fast_memoize_1.default)((interpreter) => {
         (0, react_2.useEffect)(() => {
             if (activeRouteEvents) {
                 activeRouteEvents.forEach((event) => {
+                    // @ts-ignore fixed in v5 branch
                     if (interpreter.state.nextEvents.includes(event.type)) {
                         interpreter.send(event);
                     }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "4.3.0",
+  "version": "4.4.0-beta.2",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [