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

package/lib/builders.js

@@ -3,8 +3,9 @@ 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.viewToMachine = exports.createXStateTreeMachine = exports.buildXStateTreeMachine = exports.buildView = exports.buildActions = exports.buildSelectors = void 0;
 const react_1 = __importDefault(require("react"));
+const xstate_1 = require("xstate");
 /**
  * @public
  *
@@ -148,3 +149,17 @@ 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;

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';
@@ -835,6 +835,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.1",
   "license": "MIT",
   "description": "Build UIs with Actors using xstate and React",
   "keywords": [