@koordinates/xstate-tree 4.1.2 → 4.1.4

package/README.md

@@ -15,7 +15,7 @@ While xstate-tree manages your application state, it does not have a mechanism f
 
 At Koordinates we use xstate-tree for all new UI development. Our desktop application, built on top of [Kart](https://kartproject.org/) our Geospatial version control system, is built entirely with xstate-tree using GraphQL for global state.
 
-A minimal example of a single machine tree (See [CodeSandbox](https://codesandbox.io/s/xstate-tree-b0el6e-forked-4i6txh?file=/src/index.tsx) for slightly expanded multi-machine example):
+A minimal example of a single machine tree:
 
 ```tsx
 import React from "react";
@@ -155,7 +155,7 @@ Slotted machines are determined based on the id of the invoked/spawned machine.
 `singleSlot` accepts the name of the slot as the first argument and returns an object with a method `getId()` that returns the id of the slot.  
 `multiSlot` accepts the name of the slot and returns an object with a method `getId(id: string)` that returns the id of the slot
 
-You should always use the `getId` methods when invoking/spawning something into a slot. Each slot the machine has must be represented by a call to `singleSlot` or `multiSlot` and stored into an array of slots. These slots must be passed to the `buildView` and `buildXStateTreeMachine` functions.
+You should always use the `getId` methods when invoking/spawning something into a slot. Each slot the machine has must be represented by a call to `singleSlot` or `multiSlot` and stored into an array of slots. These slots must be passed to the `createXStateTreeMachine` function.
 
 ### Inter-machine communication
 
@@ -182,7 +182,7 @@ That adds two events to the system, a no payload event (`{ type: "BASIC" }`) and
 These events can be added anywhere, either next to a component for component specific events or in a module for events that are for multiple machines. One thing that it is important to keep in mind is that these `declare global` declarations must be loaded by the `.d.ts` files when importing the component, otherwise the events will be missing. Which means
 
 1. If they are in their own file, say for a module level declaration, that file will need to be imported somewhere. Somewhere that using a component will trigger the import
-2. If they are tied to a component they need to be in the index.ts file that imports the view/selectors/actions etc and calls `buildXstateTreeMachine`. If they are in the file containing those functions the index.d.ts file will not end up importing them.
+2. If they are tied to a component they need to be in the index.ts file that imports the view/selectors/actions etc and calls `createXStateTreeMachine`. If they are in the file containing those functions the index.d.ts file will not end up importing them.
 
 
 ### [Storybook](https://storybook.js.org)

package/lib/testingUtilities.js

@@ -77,7 +77,8 @@ export function buildTestRootComponent(machine, logger) {
     if (!machine.meta) {
         throw new Error("Root machine has no meta");
     }
-    if (!machine.meta.view) {
+    if ((machine.meta.builderVersion === 1 && !machine.meta.view) ||
+        (machine.meta.builderVersion === 2 && !machine.meta.View)) {
         throw new Error("Root machine has no associated view");
     }
     const onChangeEmitter = new TinyEmitter();

package/lib/xstate-tree.d.ts

@@ -202,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, XstateTreeMachineStateSchemaV1<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> | XstateTreeMachineStateSchemaV2<TMachine, TSelectors, TActions>, EventFrom<TMachine>>, logger: typeof console.log): {
     rootComponent: () => JSX.Element | null;
     addTransitionListener: (listener: () => void) => void;
     awaitTransition(): Promise<void>;

package/lib/xstateTree.js

@@ -35,6 +35,7 @@ export function onBroadcast(handler) {
 function cacheKeyForInterpreter(
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 interpreter) {
+    console.log("cacheKeyForInterpreter", interpreter);
     return interpreter.sessionId;
 }
 const getViewForInterpreter = memoize((interpreter) => {
@@ -54,7 +55,10 @@ const getViewForInterpreter = memoize((interpreter) => {
 }, 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 { serializer: cacheKeyForInterpreter });
-const getMultiSlotViewForChildren = memoize((parent, slot) => {
+/**
+ * @private
+ */
+export const getMultiSlotViewForChildren = memoize((parent, slot) => {
     return React.memo(function MultiSlotView() {
         const [_, children] = useService(parent);
         const interpreters = [...children.values()];
@@ -64,10 +68,7 @@ const getMultiSlotViewForChildren = memoize((parent, slot) => {
         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}`),
+    serializer: (args) => `${cacheKeyForInterpreter(args[0])}-${args[1]}`,
 });
 function useSlots(interpreter, slots) {
     return useConstant(() => {

package/package.json

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