@koordinates/xstate-tree 1.2.0 → 2.0.0

package/lib/index.js

@@ -2,7 +2,7 @@ export * from "./builders";
 export * from "./slots";
 export { broadcast, buildRootComponent, onBroadcast } from "./xstateTree";
 export * from "./types";
-export { buildStorybookComponent, buildTestRootComponent, buildViewProps, genericSlotsTestingDummy, slotTestingDummyFactory, } from "./testingUtilities";
+export { buildTestRootComponent, buildViewProps, genericSlotsTestingDummy, slotTestingDummyFactory, } from "./testingUtilities";
 export { Link, buildCreateRoute, matchRoute, } from "./routing";
 export { loggingMetaOptions } from "./useService";
 export { lazy } from "./lazy";

package/lib/lazy.js

@@ -1,4 +1,3 @@
-import { identity } from "lodash";
 import React from "react";
 import { createMachine, } from "xstate";
 import { buildActions, buildSelectors, buildView, buildXStateTreeMachine, } from "./builders";
@@ -34,8 +33,8 @@ export function lazy(factory, { Loader = () => null, withContext = () => ({}), }
             },
         },
     });
-    const selectors = buildSelectors(machine, identity);
-    const actions = buildActions(machine, selectors, identity);
+    const selectors = buildSelectors(machine, (ctx) => ctx);
+    const actions = buildActions(machine, selectors, (_send, _selectors) => { });
     const view = buildView(machine, selectors, actions, slots, ({ slots, inState }) => {
         if (inState("loading")) {
             return React.createElement(Loader, null);

package/lib/testingUtilities.js

@@ -1,10 +1,9 @@
 // ignore file coverage
 import { useMachine } from "@xstate/react";
-import { set, transform, isEqual, isObject, isNil } from "lodash";
-import React, { useEffect, useState } from "react";
+import { transform, isEqual, isObject, isNil } from "lodash";
+import React, { useEffect } from "react";
 import { TinyEmitter } from "tiny-emitter";
-import { State, createMachine, } from "xstate";
-import { initEvent } from "xstate/lib/actions";
+import { createMachine, } from "xstate";
 import { buildXStateTreeMachine } from "./builders";
 import { emitter, recursivelySend, XstateTreeView } from "./xstateTree";
 /**
@@ -138,62 +137,3 @@ function difference(object, base) {
     }
     return changes(object, base);
 }
-/**
- * @internal
- * Builds a root component for use in Storybook
- *
- * Pass in an initial state and context and the machine will start from that state
- *
- * This does _not_ work for any machines using slots, nothing will be invoked unless
- * it would be invoked by the state you have chosen the machine to start in
- *
- * XState will not run any invoke handlers for parent states or sibling states that
- * would be passed through if the machine was executing normally
- *
- * I have no solutions for this
- */
-export function buildStorybookComponent(machine, state, context) {
-    var _a;
-    if (state === void 0) { state = machine.initial; }
-    if (context === void 0) { context = (_a = machine.context) !== null && _a !== void 0 ? _a : {}; }
-    // `set` converts a state.like.this to a {state: { like: this {} } }
-    const objectState = set({}, String(state), undefined);
-    const startingState = new State({
-        value: objectState,
-        context: context,
-        _event: initEvent,
-        _sessionid: null,
-        historyValue: undefined,
-        history: undefined,
-        actions: [],
-        activities: undefined,
-        meta: undefined,
-        events: [],
-        configuration: [],
-        transitions: [],
-        children: {},
-    });
-    return function XstateTreeStorybookComponent() {
-        const [_state, _send, interpreter] = useMachine(machine, {
-            devTools: true,
-            state: startingState,
-        });
-        const [_ignored, forceRender] = useState(0);
-        useEffect(() => {
-            function handler(event) {
-                recursivelySend(interpreter, event);
-            }
-            emitter.on("event", handler);
-            // Hack to get around the fact I'm not seeing it re-render after the
-            // interpreter is initialized
-            setTimeout(() => forceRender(1), 250);
-            return () => {
-                emitter.off("event", handler);
-            };
-        }, [interpreter]);
-        if (!interpreter.initialized) {
-            return null;
-        }
-        return React.createElement(XstateTreeView, { interpreter: interpreter });
-    };
-}

package/lib/xstate-tree.d.ts

@@ -1,21 +1,28 @@
 import { AnyEventObject } from 'xstate';
+import type { AnyFunction } from 'xstate';
 import { AnyStateMachine } from 'xstate';
 import { BaseActionObject } from 'xstate';
 import { ComponentPropsWithRef } from 'react';
+import { ContextFrom } from 'xstate';
+import { EventFrom } from 'xstate';
 import { EventObject } from 'xstate';
 import { History as History_2 } from 'history';
-import { Interpreter } from 'xstate';
+import type { InterpreterFrom } from 'xstate';
 import { JSXElementConstructor } from 'react';
-import { NoInfer } from 'xstate';
 import { ParsedQuery } from 'query-string';
 import { default as React_2 } from 'react';
 import { ResolveTypegenMeta } from 'xstate';
 import { ServiceMap } from 'xstate';
+import type { StateFrom } from 'xstate';
 import { StateMachine } from 'xstate';
 import { TypegenDisabled } from 'xstate';
-import { Typestate } from 'xstate';
 import * as Z from 'zod';
 
+/**
+ * @public
+ */
+export declare type AnyActions = (send: any, selectors: any) => any;
+
 /**
  * @public
  */
@@ -33,6 +40,16 @@ export declare type AnyRoute = {
     querySchema?: Z.ZodObject<any>;
 };
 
+/**
+ * @public
+ */
+export declare type AnySelector = Selectors<any, any, any, any>;
+
+/**
+ * @public
+ */
+export declare type AnyXstateTreeMachine = StateMachine<any, XstateTreeMachineStateSchema<AnyStateMachine, any, any>, any>;
+
 /**
  * @public
  */
@@ -46,7 +63,7 @@ export declare function broadcast(event: GlobalEvents): void;
 /**
  * @public
  */
-export declare function buildActions<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TActions, TSelectors, TSend = (send: TEvent) => void>(__machine: StateMachine<TContext, any, TEvent, TTypestate, any, any, any>, __selectors: Selectors<TContext, TEvent, TSelectors, TTypestate["value"]>, actions: (send: TSend, selectors: TSelectors) => TActions): (send: TSend, selectors: TSelectors) => TActions;
+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;
 
 /**
  * @public
@@ -130,39 +147,21 @@ export declare function buildCreateRoute(history: XstateTreeHistory, basePath: s
 /**
  * @public
  */
-export declare function buildRootComponent<TContext, TEvent extends EventObject, TTypeState extends Typestate<TContext>, TSelectors, TActions, TSlots extends readonly Slot[]>(machine: StateMachine<TContext, XstateTreeMachineStateSchema<TContext, TEvent, TTypeState, TSelectors, TActions, TSlots>, TEvent, TTypeState>, routing?: {
-    routes: Route<any, any, any, any>[];
-    history: History_2<{
-        meta?: any;
-    }>;
+export declare function buildRootComponent(machine: AnyXstateTreeMachine, routing?: {
+    routes: AnyRoute[];
+    history: XstateTreeHistory<any>;
     basePath: string;
     getPathName?: () => string;
     getQueryString?: () => string;
 }): {
     (): JSX.Element | null;
-    rootMachine: StateMachine<TContext, XstateTreeMachineStateSchema<TContext, TEvent, TTypeState, TSelectors, TActions, TSlots, Interpreter<TContext, any, TEvent, TTypeState, TypegenDisabled>>, TEvent, TTypeState, BaseActionObject, ServiceMap, ResolveTypegenMeta<TypegenDisabled, NoInfer<TEvent>, BaseActionObject, ServiceMap>>;
+    rootMachine: AnyXstateTreeMachine;
 };
 
 /**
  * @public
  */
-export declare function buildSelectors<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TSelectors>(__machine: StateMachine<TContext, any, TEvent, TTypestate, any, any, any>, selectors: Selectors<TContext, TEvent, TSelectors, TTypestate["value"]>): (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: (state: TTypestate["value"]) => boolean, currentState: TTypestate["value"]) => TSelectors;
-
-/**
- * @internal
- * Builds a root component for use in Storybook
- *
- * Pass in an initial state and context and the machine will start from that state
- *
- * This does _not_ work for any machines using slots, nothing will be invoked unless
- * it would be invoked by the state you have chosen the machine to start in
- *
- * XState will not run any invoke handlers for parent states or sibling states that
- * would be passed through if the machine was executing normally
- *
- * I have no solutions for this
- */
-export declare function buildStorybookComponent<TContext, TEvent extends EventObject, TTypeState extends Typestate<TContext>, TSelectors, TActions, TSlots extends readonly Slot[]>(machine: StateMachine<TContext, XstateTreeMachineStateSchema<TContext, TEvent, TTypeState, TSelectors, TActions, TSlots>, TEvent, TTypeState>, state?: TTypeState["value"], context?: TContext): () => JSX.Element | null;
+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>>;
 
 /**
  * @public
@@ -179,7 +178,7 @@ export declare function buildStorybookComponent<TContext, TEvent extends EventOb
  *
  * It also delays for 5ms to ensure any React re-rendering happens in response to the state transition
  */
-export declare function buildTestRootComponent<TContext, TEvent extends EventObject, TTypeState extends Typestate<TContext>, TSelectors, TActions, TSlots extends readonly Slot[]>(machine: StateMachine<TContext, XstateTreeMachineStateSchema<TContext, TEvent, TTypeState, TSelectors, TActions, TSlots>, TEvent, TTypeState>, logger: typeof console.log): {
+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): {
     rootComponent: () => JSX.Element | null;
     addTransitionListener: (listener: () => void) => void;
     awaitTransition(): Promise<void>;
@@ -188,7 +187,7 @@ export declare function buildTestRootComponent<TContext, TEvent extends EventObj
 /**
  * @public
  */
-export declare function buildView<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TActions, TSelectors, TSlots extends readonly Slot[] = [], TViewProps = ViewProps<TSelectors, TActions, TSlots, TTypestate["value"]>, TSend = (send: TEvent) => void>(__machine: StateMachine<TContext, any, TEvent, TTypestate, any, any, any>, __selectors: Selectors<TContext, TEvent, TSelectors, TTypestate["value"]>, __actions: (send: TSend, selectors: TSelectors) => TActions, __slots: TSlots, view: React_2.ComponentType<TViewProps>): React_2.ComponentType<TViewProps>;
+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>;
 
 /**
  * @public
@@ -198,7 +197,9 @@ export declare function buildViewProps<C extends keyof JSX.IntrinsicElements | J
 /**
  * @public
  */
-export declare function buildXStateTreeMachine<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TSelectors = unknown, TActions = unknown, TInterpreter extends Interpreter<TContext, any, TEvent, TTypestate> = Interpreter<TContext, any, TEvent, TTypestate>, TSlots extends readonly Slot[] = Slot[]>(machine: StateMachine<TContext, any, TEvent, TTypestate, any, any, any>, meta: XStateTreeMachineMeta<TContext, TEvent, TTypestate, TSelectors, TActions, TInterpreter, TSlots>): StateMachine<TContext, XstateTreeMachineStateSchema<TContext, TEvent, TTypestate, TSelectors, TActions, TSlots, TInterpreter>, TEvent, TTypestate, any, any, any>;
+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>;
+
+declare type CanHandleEvent<TMachine extends AnyStateMachine> = (e: EventFrom<TMachine>) => boolean;
 
 declare type Context = {};
 
@@ -236,10 +237,10 @@ export declare type GlobalEvents = {
     };
 }[keyof XstateTreeEvents];
 
-declare type InferViewProps<T> = T extends ViewProps<infer TSelectors, infer TActions, never, infer TStates> ? {
+declare type InferViewProps<T> = T extends ViewProps<infer TSelectors, infer TActions, never, infer TMatches> ? {
     selectors: TSelectors;
     actions: TActions;
-    inState: (state: TStates) => (state: TStates) => boolean;
+    inState: (state: Parameters<TMatches>[0]) => TMatches;
 } : never;
 
 declare type IsEmptyObject<Obj, ExcludeOptional extends boolean = false> = [
@@ -291,6 +292,11 @@ export declare function loggingMetaOptions<TEvents extends EventObject, TContext
 
 declare type MakeEmptyObjectPropertiesOptional<T> = Omit<T, EmptyKeys<T>> & Partial<Pick<T, EmptyKeys<T>>>;
 
+/**
+ * @internal
+ */
+export declare type MatchesFrom<T extends AnyStateMachine> = StateFrom<T>["matches"];
+
 /**
  * @public
  */
@@ -347,6 +353,11 @@ declare type Options_2<TContext> = {
     withContext?: () => Partial<TContext>;
 };
 
+/**
+ * @public
+ */
+export declare type OutputFromSelector<T> = T extends Selectors<any, any, infer O, any> ? O : never;
+
 /**
  * @public
  */
@@ -497,7 +508,10 @@ export declare type RoutingEvent<T> = T extends Route<infer TParams, infer TQuer
     meta: TMeta;
 } : never;
 
-declare type Selectors<TContext, TEvent extends EventObject, TSelectors, TStates> = (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: (state: TStates) => boolean, __currentState: TStates) => TSelectors;
+/**
+ * @public
+ */
+export declare type Selectors<TContext, TEvent, TSelectors, TMatches> = (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: TMatches, __currentState: never) => TSelectors;
 
 /**
  * @public
@@ -543,16 +557,10 @@ export declare type Slot = SingleSlot<any> | MultiSlot<any>;
 /**
  * @public
  */
-export declare function slotTestingDummyFactory(name: string): StateMachine<unknown, XstateTreeMachineStateSchema<unknown, AnyEventObject, {
+export declare function slotTestingDummyFactory(name: string): StateMachine<unknown, XstateTreeMachineStateSchema<StateMachine<unknown, any, AnyEventObject, {
     value: any;
     context: unknown;
-}, {}, {}, never[], Interpreter<unknown, any, AnyEventObject, {
-value: any;
-context: unknown;
-}, TypegenDisabled>>, AnyEventObject, {
-    value: any;
-    context: unknown;
-}, any, any, any>;
+}, BaseActionObject, ServiceMap, ResolveTypegenMeta<TypegenDisabled, AnyEventObject, BaseActionObject, ServiceMap>>, () => {}, () => {}>, AnyEventObject, any, any, any, any>;
 
 /**
  * @public
@@ -578,37 +586,37 @@ export declare type StyledLink<TStyleProps = {}> = <TRoute extends AnyRoute>(pro
 /**
  * @public
  */
-export declare type ViewProps<TSelectors, TActions, TSlots extends readonly Slot[], TState> = {
+export declare type ViewProps<TSelectors, TActions, TSlots extends readonly Slot[], TMatches extends AnyFunction> = {
     slots: Record<GetSlotNames<TSlots>, React_2.ComponentType>;
     actions: TActions;
     selectors: TSelectors;
-    inState: (state: TState) => boolean;
+    inState: TMatches;
 };
 
 /**
  * @public
  */
-export declare type XstateTreeHistory = History_2<{
-    meta?: unknown;
+export declare type XstateTreeHistory<T = unknown> = History_2<{
+    meta?: T;
     previousUrl?: string;
 }>;
 
 /**
  * @public
  */
-export declare type XStateTreeMachineMeta<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TSelectors = unknown, TActions = unknown, TInterpreter extends Interpreter<TContext, any, TEvent, TTypestate> = Interpreter<TContext, any, TEvent, TTypestate>, TSlots extends readonly Slot[] = Slot[]> = {
+export declare type XStateTreeMachineMeta<TMachine extends AnyStateMachine, TSelectors, TActions extends AnyActions, TSlots extends readonly Slot[] = Slot[]> = {
     slots: TSlots;
-    view: React_2.ComponentType<ViewProps<TSelectors, TActions, TSlots, TTypestate["value"]>>;
-    selectors: (ctx: TContext, canHandleEvent: (e: TEvent) => boolean, inState: (state: TTypestate["value"]) => boolean, _state: TTypestate["value"]) => TSelectors;
-    actions: (send: TInterpreter["send"], selectors: TSelectors) => TActions;
+    view: React_2.ComponentType<ViewProps<OutputFromSelector<TSelectors>, ReturnType<TActions>, TSlots, MatchesFrom<TMachine>>>;
+    selectors: TSelectors;
+    actions: TActions;
     xstateTreeMachine?: true;
 };
 
 /**
  * @public
  */
-export declare type XstateTreeMachineStateSchema<TContext, TEvent extends EventObject, TTypestate extends Typestate<TContext>, TSelectors = unknown, TActions = unknown, TSlots extends readonly Slot[] = Slot[], TInterpreter extends Interpreter<TContext, any, TEvent, TTypestate> = Interpreter<TContext, any, TEvent, TTypestate>> = {
-    meta: XStateTreeMachineMeta<TContext, TEvent, TTypestate, TSelectors, TActions, TInterpreter, TSlots>;
+export declare type XstateTreeMachineStateSchema<TMachine extends AnyStateMachine, TSelectors extends AnySelector, TActions extends AnyActions> = {
+    meta: XStateTreeMachineMeta<TMachine, TSelectors, TActions>;
 };
 
 export { }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@koordinates/xstate-tree",
   "main": "lib/index.js",
   "types": "lib/xstate-tree.d.ts",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "dependencies": {
     "@xstate/react": "3.0.0",
     "fast-memoize": "2.5.2",