@koordinates/xstate-tree 4.0.1 → 4.1.0-beta.2

package/README.md

@@ -23,10 +23,7 @@ import { createRoot } from "react-dom/client";
 import { createMachine } from "xstate";
 import { assign } from "@xstate/immer";
 import {
-  buildSelectors,
-  buildActions,
-  buildView,
-  buildXStateTreeMachine,
+  createXStateTreeMachine
   buildRootComponent
 } from "@koordinates/xstate-tree";
 
@@ -35,10 +32,6 @@ type Events =
   | { type: "INCREMENT"; amount: number };
 type Context = { incremented: number };
 
-// If this tree had more than a single machine the slots to render child machines into would be defined here
-// see the codesandbox example for an expanded demonstration that uses slots
-const slots = [];
-
 // A standard xstate machine, nothing extra is needed for xstate-tree
 const machine = createMachine<Context, Events>(
   {
@@ -74,39 +67,42 @@ const machine = createMachine<Context, Events>(
   }
 );
 
-// Selectors to transform the machines state into a representation useful for the view
-const selectors = buildSelectors(machine, (ctx, canHandleEvent) => ({
-  canIncrement: canHandleEvent({ type: "INCREMENT", amount: 1 }),
-  showSecret: ctx.incremented > 10,
-  count: ctx.incremented
-}));
-
-// Actions to abstract away the details of sending events to the machine
-const actions = buildActions(machine, selectors, (send, selectors) => ({
-  increment(amount: number) {
-    send({
-      type: "INCREMENT",
-      amount: selectors.count > 4 ? amount * 2 : amount
-    });
+const RootMachine = createXStateTreeMachine(machine, {
+  // Selectors to transform the machines state into a representation useful for the view
+  selectors({ ctx, canHandleEvent, inState }) {
+    return {
+      canIncrement: canHandleEvent({ type: "INCREMENT", amount: 1 }),
+      showSecret: ctx.incremented > 10,
+      count: ctx.incremented,
+      active: inState("active")
+    }
   },
-  switch() {
-    send({ type: "SWITCH_CLICKED" });
-  }
-}));
-
-// A view to bring it all together
-// the return value is a plain React view that can be rendered anywhere by passing in the needed props
-// the view has no knowledge of the machine it's bound to
-const view = buildView(
-  machine,
-  selectors,
-  actions,
-  slots,
-  ({ actions, selectors, inState }) => {
+  // Actions to abstract away the details of sending events to the machine
+  actions({ send, selectors }) {
+    return {
+      increment(amount: number) {
+        send({
+          type: "INCREMENT",
+          amount: selectors.count > 4 ? amount * 2 : amount
+        });
+      },
+      switch() {
+        send({ type: "SWITCH_CLICKED" });
+      }
+    }
+  },
+
+  // If this tree had more than a single machine the slots to render child machines into would be defined here
+  // see the codesandbox example for an expanded demonstration that uses slots
+  slots: [],
+  // A view to bring it all together
+  // the return value is a plain React view that can be rendered anywhere by passing in the needed props
+  // the view has no knowledge of the machine it's bound to
+  view({ actions, selectors }) {
     return (
       <div>
         <button onClick={() => actions.switch()}>
-          {inState("active") ? "Deactivate" : "Activate"}
+          {selectors.active ? "Deactivate" : "Activate"}
         </button>
         <p>Count: {selectors.count}</p>
         <button
@@ -118,15 +114,7 @@ const view = buildView(
         {selectors.showSecret && <p>The secret password is hunter2</p>}
       </div>
     );
-  }
-);
-
-// Stapling the machine, selectors, actions, view, and slots together
-const RootMachine = buildXStateTreeMachine(machine, {
-  selectors,
-  actions,
-  view,
-  slots
+  },
 });
 
 // Build the React host for the tree
@@ -145,16 +133,16 @@ Each machine that forms the tree representing your UI has an associated set of s
   - Selector functions are provided with the current context of the machine, a function to determine if it can handle a given event and a function to determine if it is in a given state, and expose the returned result to the view.
   - Action functions are provided with the `send` method bound to the machines interpreter and the result of calling the selector function
   - Slots are how children of the machine are exposed to the view. They can be either single slot for a single actor, or multi slot for when you have a list of actors. 
-  - View functions are React views provided with the output of the selector and action functions, a function to determine if the machine is in a given state, and the currently active slots
+  - View functions are React views provided with the output of the selector and action functions, and the currently active slots
 
 ## API
 
-To assist in making xstate-tree easy to use with TypeScript there are "builder" functions for selectors, actions, views and the final XState tree machine itself. These functions primarily exist to type the arguments passed into the selector/action/view functions.
+To assist in making xstate-tree easy to use with TypeScript there is the `createXStateTreeMachine` function for typing selectors, actions and view arguments and stapling the resulting functions to the xstate machine
 
-* `buildSelectors`, first argument is the machine we are creating selectors for, second argument is the selector factory which receives the machines context as the first argument. It also memoizes the selector factory for better rendering performance  
-* `buildActions`, first argument is the machine we are creating actions for, the second argument is the result of `buildSelectors` and the third argument is the actions factory which receives an XState `send` function and the result of calling the selectors factory. It also memoizes the selector factory for better rendering performance  
-* `buildView`, first argument is the machine we are creating a view for, second argument is the selector factory, third argument is the actions factory, fourth argument is the array of slots and the fifth argument is the view function itself which gets supplied the selectors, actions, slots and `inState` method as props. It wraps the view in a React.memo  
-* `buildXStateTreeMachine` takes the results of `buildSelectors`, `buildActions`, `buildView` and the list of slots and returns an xstate-tree compatible machine
+`createXStateTreeMachine` accepts the xstate machine as the first argument and takes an options argument with the following fields, it is important the fields are defined in this order or TypeScript will infer the wrong types:
+* `selectors`, receives an object with `ctx`, `inState`, and `canHandleEvent` fields. `ctx` is the machines current context, `inState` is the xstate `state.matches` function to allow determining if the machine is in a given state, and `canHandleEvent` accepts an event object and returns whether the machine will do anything in response to that event in it's current state 
+* `actions`,  receives an object with `send` and `selectors` fields. `send` is the xstate `send` function bound to the machine, and `selectors` is the result of calling the selector function 
+* `view`, is a React component that receives `actions`, `selectors`, and `slots` as props. `actions` and `selectors` being the result of the action/selector functions and `slots` being an object with keys as the slot names and the values the slots React component 
 
 Full API docs coming soon, see [#20](https://github.com/koordinates/xstate-tree/issues/20)
 
@@ -203,15 +191,6 @@ It is relatively simple to display xstate-tree views directly in Storybook. Sinc
 
 There are a few utilities in xstate-tree to make this easier
 
-#### `buildViewProps`
-This is a builder function that accepts a view to provide typings and then an object containing
-actions/selector fields. With the typings it provides these fields are type safe and you can autocomplete them.
-
-It returns the props object and extends it with an `inState` factory function, so you can destructure it for use in Stories. The `inState` function accepts a state string as an argument, and returns a function that returns true if the state supplied matches that. So you can easily render the view in a specific machine state in the Story
-```
-const { actions, selectors, inState } = buildViewProps(view, { actions: {], selectors: {} });
-```
-
 #### `genericSlotsTestingDummy`
 
 This is a simple Proxy object that renders a <div> containing the name of the slot whenever rendering

package/lib/builders.js

@@ -14,6 +14,7 @@ import React from "react";
  * @param machine - The machine to create the selectors for
  * @param selectors - The selector function
  * @returns The selectors - ready to be passed to {@link buildActions}
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
 export function buildSelectors(__machine, selectors) {
     let lastState = undefined;
@@ -52,6 +53,7 @@ export function buildSelectors(__machine, selectors) {
  * @param selectors - The selectors function
  * @param actions - The action function
  * @returns The actions function - ready to be passed to {@link buildView}
+ * @deprecated use {@link createXStateTreeMachine} instead
  * */
 export function buildActions(__machine, __selectors, actions) {
     return actions;
@@ -73,6 +75,7 @@ export function buildActions(__machine, __selectors, actions) {
  * @param slots - The array of slots that can be rendered by the view
  * @param view - The view function
  * @returns The React view
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
 export function buildView(__machine, __selectors, __actions, __slots, view) {
     return React.memo(view);
@@ -85,11 +88,52 @@ export function buildView(__machine, __selectors, __actions, __slots, view) {
  * @param machine - The machine to staple the selectors/actions/slots/view to
  * @param metadata - The xstate-tree metadata to staple to the machine
  * @returns The xstate-tree machine, ready to be invoked by other xstate-machines or used with `buildRootComponent`
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
 export function buildXStateTreeMachine(machine, meta) {
     const copiedMeta = { ...meta };
     copiedMeta.xstateTreeMachine = true;
-    machine.config.meta = { ...machine.config.meta, ...copiedMeta };
-    machine.meta = { ...machine.meta, ...copiedMeta };
+    machine.config.meta = {
+        ...machine.config.meta,
+        ...copiedMeta,
+        builderVersion: 1,
+    };
+    machine.meta = { ...machine.meta, ...copiedMeta, builderVersion: 1 };
+    return machine;
+}
+/**
+ * @public
+ * Creates an xstate-tree machine from an xstate-machine
+ *
+ * Accepts an options object defining the selectors/actions/slots and view for the xstate-tree machine
+ *
+ * Selectors/slots/actions can be omitted from the options object and will default to
+ * - actions: an empty object
+ * - selectors: the context of the machine
+ * - slots: an empty array
+ *
+ * @param machine - The xstate machine to create the xstate-tree machine from
+ * @param options - the xstate-tree options
+ */
+export function createXStateTreeMachine(machine, options) {
+    var _a, _b, _c;
+    const selectors = (_a = options.selectors) !== null && _a !== void 0 ? _a : (({ ctx }) => ctx);
+    const actions = (_b = options.actions) !== null && _b !== void 0 ? _b : (() => ({}));
+    const xstateTreeMeta = {
+        selectors,
+        actions,
+        view: options.view,
+        slots: (_c = options.slots) !== null && _c !== void 0 ? _c : [],
+    };
+    machine.meta = {
+        ...machine.meta,
+        ...xstateTreeMeta,
+        builderVersion: 2,
+    };
+    machine.config.meta = {
+        ...machine.config.meta,
+        ...xstateTreeMeta,
+        builderVersion: 2,
+    };
     return machine;
 }

package/lib/routing/createRoute/createRoute.js

@@ -153,7 +153,7 @@ export function buildCreateRoute(history, basePath) {
                         navigate({
                             url: joinRoutes(this.basePath, url),
                             meta,
-                            history: this.history,
+                            history: this.history(),
                         });
                     },
                 };

package/lib/xstate-tree.d.ts

@@ -18,6 +18,14 @@ import { StateMachine } from 'xstate';
 import { TypegenDisabled } from 'xstate';
 import * as Z from 'zod';
 
+/**
+ * @public
+ */
+export declare type Actions<TMachine extends AnyStateMachine, TSelectorsOutput, TOut> = (args: {
+    send: InterpreterFrom<TMachine>["send"];
+    selectors: TSelectorsOutput;
+}) => TOut;
+
 /**
  * @public
  */
@@ -33,7 +41,7 @@ export declare type AnyRoute = {
     getEvent: any;
     event: string;
     basePath: string;
-    history: XstateTreeHistory;
+    history: () => XstateTreeHistory;
     parent?: AnyRoute;
     paramsSchema?: Z.ZodObject<any>;
     querySchema?: Z.ZodObject<any>;
@@ -45,12 +53,12 @@ export declare type AnyRoute = {
 /**
  * @public
  */
-export declare type AnySelector = Selectors<any, any, any, any>;
+export declare type AnySelector = V1Selectors<any, any, any, any>;
 
 /**
  * @public
  */
-export declare type AnyXstateTreeMachine = StateMachine<any, XstateTreeMachineStateSchema<AnyStateMachine, any, any>, any>;
+export declare type AnyXstateTreeMachine = StateMachine<any, XstateTreeMachineStateSchemaV1<AnyStateMachine, AnySelector, AnyActions> | XstateTreeMachineStateSchemaV2<AnyStateMachine, any, any>, any>;
 
 /**
  * @public
@@ -80,6 +88,7 @@ export declare function broadcast(event: GlobalEvents): void;
  * @param selectors - The selectors function
  * @param actions - The action function
  * @returns The actions function - ready to be passed to {@link buildView}
+ * @deprecated use {@link createXStateTreeMachine} instead
  * */
 export declare function buildActions<TMachine extends AnyStateMachine, TActions, TSelectors, TSend = InterpreterFrom<TMachine>["send"]>(__machine: TMachine, __selectors: TSelectors, actions: (send: TSend, selectors: OutputFromSelector<TSelectors>) => TActions): (send: TSend, selectors: OutputFromSelector<TSelectors>) => TActions;
 
@@ -91,7 +100,7 @@ export declare function buildActions<TMachine extends AnyStateMachine, TActions,
  * @param history - the history object to use for this route factory, this needs to be the same one used in the trees root component
  * @param basePath - the base path for this route factory
  */
-export declare function buildCreateRoute(history: XstateTreeHistory, basePath: string): {
+export declare function buildCreateRoute(history: () => XstateTreeHistory, basePath: string): {
     simpleRoute<TBaseRoute extends AnyRoute>(baseRoute?: TBaseRoute | undefined): <TEvent extends string, TParamsSchema extends Z.ZodObject<any, "strip", Z.ZodTypeAny, {
         [x: string]: any;
     }, {
@@ -174,8 +183,9 @@ export declare function buildRootComponent(machine: AnyXstateTreeMachine, routin
  * @param machine - The machine to create the selectors for
  * @param selectors - The selector function
  * @returns The selectors - ready to be passed to {@link buildActions}
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
-export declare function buildSelectors<TMachine extends AnyStateMachine, TSelectors, TContext = ContextFrom<TMachine>>(__machine: TMachine, selectors: (ctx: TContext, canHandleEvent: CanHandleEvent<TMachine>, inState: MatchesFrom<TMachine>, __currentState: never) => TSelectors): Selectors<TContext, EventFrom<TMachine>, TSelectors, MatchesFrom<TMachine>>;
+export declare function buildSelectors<TMachine extends AnyStateMachine, TSelectors, TContext = ContextFrom<TMachine>>(__machine: TMachine, selectors: (ctx: TContext, canHandleEvent: CanHandleEvent<TMachine>, inState: MatchesFrom<TMachine>, __currentState: never) => TSelectors): V1Selectors<TContext, EventFrom<TMachine>, TSelectors, MatchesFrom<TMachine>>;
 
 /**
  * @public
@@ -192,7 +202,7 @@ export declare function buildSelectors<TMachine extends AnyStateMachine, TSelect
  *
  * It also delays for 5ms to ensure any React re-rendering happens in response to the state transition
  */
-export declare function buildTestRootComponent<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions, TContext = ContextFrom<TMachine>>(machine: StateMachine<TContext, XstateTreeMachineStateSchema<TMachine, TSelectors, TActions>, EventFrom<TMachine>>, logger: typeof console.log): {
+export declare function buildTestRootComponent<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions, TContext = ContextFrom<TMachine>>(machine: StateMachine<TContext, XstateTreeMachineStateSchemaV1<TMachine, TSelectors, TActions>, EventFrom<TMachine>>, logger: typeof console.log): {
     rootComponent: () => JSX.Element | null;
     addTransitionListener: (listener: () => void) => void;
     awaitTransition(): Promise<void>;
@@ -215,6 +225,7 @@ export declare function buildTestRootComponent<TMachine extends AnyStateMachine,
  * @param slots - The array of slots that can be rendered by the view
  * @param view - The view function
  * @returns The React view
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
 export declare function buildView<TMachine extends AnyStateMachine, TEvent extends EventObject, TActions, TSelectors extends AnySelector, TSlots extends readonly Slot[] = [], TMatches extends AnyFunction = MatchesFrom<TMachine>, TViewProps = ViewProps<OutputFromSelector<TSelectors>, TActions, TSlots, TMatches>, TSend = (send: TEvent) => void>(__machine: TMachine, __selectors: TSelectors, __actions: (send: TSend, selectors: OutputFromSelector<TSelectors>) => TActions, __slots: TSlots, view: React_2.ComponentType<TViewProps>): React_2.ComponentType<TViewProps>;
 
@@ -237,13 +248,33 @@ export declare function buildViewProps<C extends keyof JSX.IntrinsicElements | J
  * @param machine - The machine to staple the selectors/actions/slots/view to
  * @param metadata - The xstate-tree metadata to staple to the machine
  * @returns The xstate-tree machine, ready to be invoked by other xstate-machines or used with `buildRootComponent`
+ * @deprecated use {@link createXStateTreeMachine} instead
  */
-export declare function buildXStateTreeMachine<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions>(machine: TMachine, meta: XStateTreeMachineMeta<TMachine, TSelectors, TActions>): StateMachine<ContextFrom<TMachine>, XstateTreeMachineStateSchema<TMachine, TSelectors, TActions>, EventFrom<TMachine>, any, any, any, any>;
+export declare function buildXStateTreeMachine<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions>(machine: TMachine, meta: XStateTreeMachineMetaV1<TMachine, TSelectors, TActions>): StateMachine<ContextFrom<TMachine>, XstateTreeMachineStateSchemaV1<TMachine, TSelectors, TActions>, EventFrom<TMachine>, any, any, any, any>;
 
-declare type CanHandleEvent<TMachine extends AnyStateMachine> = (e: EventFrom<TMachine>) => boolean;
+/**
+ * @internal
+ */
+export declare type CanHandleEvent<TMachine extends AnyStateMachine> = (e: EventFrom<TMachine>) => boolean;
 
 declare type Context = {};
 
+/**
+ * @public
+ * Creates an xstate-tree machine from an xstate-machine
+ *
+ * Accepts an options object defining the selectors/actions/slots and view for the xstate-tree machine
+ *
+ * Selectors/slots/actions can be omitted from the options object and will default to
+ * - actions: an empty object
+ * - selectors: the context of the machine
+ * - slots: an empty array
+ *
+ * @param machine - The xstate machine to create the xstate-tree machine from
+ * @param options - the xstate-tree options
+ */
+export declare function createXStateTreeMachine<TMachine extends AnyStateMachine, TSelectorsOutput = ContextFrom<TMachine>, TActionsOutput = Record<never, string>, TSlots extends readonly Slot[] = []>(machine: TMachine, options: V2BuilderMeta<TMachine, TSelectorsOutput, TActionsOutput, TSlots>): StateMachine<ContextFrom<TMachine>, XstateTreeMachineStateSchemaV2<TMachine, TSelectorsOutput, TActionsOutput, TSlots>, EventFrom<TMachine>, any, any, any, any>;
+
 declare type EmptyKeys<T> = keyof {
     [K in keyof T as IsEmptyObject<T[K], true> extends true ? K : never]: T[K];
 };
@@ -400,7 +431,7 @@ declare type Options<TContext> = {
 /**
  * @public
  */
-export declare type OutputFromSelector<T> = T extends Selectors<any, any, infer O, any> ? O : never;
+export declare type OutputFromSelector<T> = T extends V1Selectors<any, any, infer O, any> ? O : never;
 
 /**
  * @public
@@ -498,7 +529,7 @@ export declare type Route<TParams, TQuery, TEvent, TMeta> = {
      * Event type for this route
      */
     event: TEvent;
-    history: XstateTreeHistory;
+    history: () => XstateTreeHistory;
     basePath: string;
     parent?: AnyRoute;
     paramsSchema?: Z.ZodObject<any>;
@@ -582,7 +613,11 @@ export declare type RoutingEvent<T> = T extends Route<infer TParams, infer TQuer
 /**
  * @public
  */
-export declare type Selectors<TContext, TEvent, TSelectors, TMatches> = (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: TMatches, __currentState: never) => TSelectors;
+export declare type Selectors<TMachine extends AnyStateMachine, TOut> = (args: {
+    ctx: ContextFrom<TMachine>;
+    canHandleEvent: CanHandleEvent<TMachine>;
+    inState: MatchesFrom<TMachine>;
+}) => TOut;
 
 /**
  * @public
@@ -636,7 +671,7 @@ export declare type Slot = SingleSlot<any> | MultiSlot<any>;
  * @param name - the string to render in the machines view
  * @returns a dummy machine that renders a div containing the supplied string
  */
-export declare function slotTestingDummyFactory(name: string): StateMachine<unknown, XstateTreeMachineStateSchema<StateMachine<unknown, any, AnyEventObject, {
+export declare function slotTestingDummyFactory(name: string): StateMachine<unknown, XstateTreeMachineStateSchemaV1<StateMachine<unknown, any, AnyEventObject, {
     value: any;
     context: unknown;
 }, BaseActionObject, ServiceMap, ResolveTypegenMeta<TypegenDisabled, AnyEventObject, BaseActionObject, ServiceMap>>, () => {}, () => {}>, AnyEventObject, any, any, any, any>;
@@ -662,6 +697,30 @@ declare type States = {
  */
 export declare type StyledLink<TStyleProps = {}> = <TRoute extends AnyRoute>(props: LinkProps<TRoute> & TStyleProps) => JSX.Element;
 
+/**
+ * @public
+ */
+export declare type V1Selectors<TContext, TEvent, TSelectors, TMatches> = (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: TMatches, __currentState: never) => TSelectors;
+
+/**
+ * @public
+ */
+export declare type V2BuilderMeta<TMachine extends AnyStateMachine, TSelectorsOutput = ContextFrom<TMachine>, TActionsOutput = Record<never, string>, TSlots extends readonly Slot[] = Slot[]> = {
+    selectors?: Selectors<TMachine, TSelectorsOutput>;
+    actions?: Actions<TMachine, TSelectorsOutput, TActionsOutput>;
+    slots?: TSlots;
+    view: View<TActionsOutput, TSelectorsOutput, TSlots>;
+};
+
+/**
+ * @public
+ */
+export declare type View<TActionsOutput, TSelectorsOutput, TSlots extends readonly Slot[]> = React_2.ComponentType<{
+    slots: Record<GetSlotNames<TSlots>, React_2.ComponentType>;
+    actions: TActionsOutput;
+    selectors: TSelectorsOutput;
+}>;
+
 /**
  * @public
  */
@@ -669,6 +728,9 @@ export declare type ViewProps<TSelectors, TActions, TSlots extends readonly Slot
     slots: Record<GetSlotNames<TSlots>, React_2.ComponentType>;
     actions: TActions;
     selectors: TSelectors;
+    /**
+     * @deprecated see https://github.com/koordinates/xstate-tree/issues/33 use `inState` in the selector function instead
+     */
     inState: TMatches;
 };
 
@@ -683,7 +745,7 @@ export declare type XstateTreeHistory<T = unknown> = History_2<{
 /**
  * @public
  */
-export declare type XStateTreeMachineMeta<TMachine extends AnyStateMachine, TSelectors, TActions extends AnyActions, TSlots extends readonly Slot[] = Slot[]> = {
+export declare type XStateTreeMachineMetaV1<TMachine extends AnyStateMachine, TSelectors, TActions extends AnyActions, TSlots extends readonly Slot[] = Slot[]> = {
     slots: TSlots;
     view: React_2.ComponentType<ViewProps<OutputFromSelector<TSelectors>, ReturnType<TActions>, TSlots, MatchesFrom<TMachine>>>;
     selectors: TSelectors;
@@ -694,8 +756,19 @@ export declare type XStateTreeMachineMeta<TMachine extends AnyStateMachine, TSel
 /**
  * @public
  */
-export declare type XstateTreeMachineStateSchema<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions> = {
-    meta: XStateTreeMachineMeta<TMachine, TSelectors, TActions>;
+export declare type XstateTreeMachineStateSchemaV1<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions> = {
+    meta: XStateTreeMachineMetaV1<TMachine, TSelectors, TActions> & {
+        builderVersion: 1;
+    };
+};
+
+/**
+ * @public
+ */
+export declare type XstateTreeMachineStateSchemaV2<TMachine extends AnyStateMachine, TSelectorsOutput = ContextFrom<TMachine>, TActionsOutput = Record<never, string>, TSlots extends readonly Slot[] = Slot[]> = {
+    meta: Required<V2BuilderMeta<TMachine, TSelectorsOutput, TActionsOutput, TSlots> & {
+        builderVersion: 2;
+    }>;
 };
 
 export { }

package/lib/xstateTree.js

@@ -104,11 +104,12 @@ function XstateTreeMultiSlotView({ childInterpreters, }) {
  * @internal
  */
 export function XstateTreeView({ interpreter }) {
+    var _a, _b;
     const [current] = useService(interpreter);
     const currentRef = useRef(current);
     currentRef.current = current;
     const selectorsRef = useRef(undefined);
-    const { view: View, actions: actionsFactory, selectors: selectorsFactory, slots: interpreterSlots, } = interpreter.machine.meta;
+    const { slots: interpreterSlots } = interpreter.machine.meta;
     const slots = useSlots(interpreter, interpreterSlots.map((x) => x.name));
     const canHandleEvent = useCallback((e) => {
         var _a;
@@ -131,14 +132,44 @@ export function XstateTreeView({ interpreter }) {
         });
     });
     const actions = useConstant(() => {
-        return actionsFactory(interpreter.send, selectorsProxy);
+        var _a;
+        switch ((_a = interpreter.machine.meta) === null || _a === void 0 ? void 0 : _a.builderVersion) {
+            case 1:
+                return interpreter.machine.meta.actions(interpreter.send, selectorsProxy);
+            case 2:
+                return interpreter.machine.meta.actions({
+                    send: interpreter.send,
+                    selectors: selectorsProxy,
+                });
+            default:
+                throw new Error("builderVersion not set");
+        }
     });
     if (!current) {
         return null;
     }
-    const selectors = selectorsFactory(current.context, canHandleEvent, inState, current.value);
-    selectorsRef.current = selectors;
-    return (React.createElement(View, { selectors: selectors, actions: actions, slots: slots, inState: inState }));
+    switch ((_a = interpreter.machine.meta) === null || _a === void 0 ? void 0 : _a.builderVersion) {
+        case 1:
+            selectorsRef.current = interpreter.machine.meta.selectors(current.context, canHandleEvent, inState, current.value);
+            break;
+        case 2:
+            selectorsRef.current = interpreter.machine.meta.selectors({
+                ctx: current.context,
+                canHandleEvent,
+                inState,
+            });
+            break;
+    }
+    switch ((_b = interpreter.machine.meta) === null || _b === void 0 ? void 0 : _b.builderVersion) {
+        case 1:
+            const ViewV1 = interpreter.machine.meta.view;
+            return (React.createElement(ViewV1, { selectors: selectorsRef.current, actions: actions, slots: slots, inState: inState }));
+        case 2:
+            const ViewV2 = interpreter.machine.meta.view;
+            return (React.createElement(ViewV2, { selectors: selectorsRef.current, actions: actions, slots: slots }));
+        default:
+            throw new Error("builderVersion not set");
+    }
 }
 /**
  * @internal

package/package.json

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