@koordinates/xstate-tree 3.0.0 → 4.0.0

package/README.md

@@ -164,8 +164,8 @@ Slots are how invoked/spawned children of the machine are supplied to the Machin
 
 Slotted machines are determined based on the id of the invoked/spawned machine. There are two types of slots, single and multi. Single slots are for invoked machines, where there will only be a single machine per slot. Multi slots are for spawned machines where there are multiple children per slot, rendered as a group; think lists. There is a set of helper functions for creating slots which in turn can be used to get the id for the slot.
 
-`singleSlot` accepts the name of the slot (must not end in `s`) 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 (must end in `s`) and returns an object with a method `getId(id: string)` that returns the id of the slot
+`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.
 

package/lib/slots/slots.js

@@ -22,7 +22,7 @@ export function singleSlot(name) {
 export function multiSlot(name) {
     return {
         type: SlotType.MultiSlot,
-        name,
-        getId: (id) => `${id}-${name.toLowerCase()}-slots`,
+        name: `${name}Multi`,
+        getId: (id) => `${id}-${name.toLowerCase()}multi-slots`,
     };
 }

package/lib/xstate-tree.d.ts

@@ -361,9 +361,9 @@ export declare type Meta<T> = T extends {
 /**
  * @public
  */
-export declare type MultiSlot<T> = {
+export declare type MultiSlot<T extends string> = {
     type: SlotType.MultiSlot;
-    name: T;
+    name: `${T}Multi`;
     getId(id: string): string;
 };
 
@@ -612,7 +612,7 @@ export declare type SharedMeta = {
 /**
  * @public
  */
-export declare type SingleSlot<T> = {
+export declare type SingleSlot<T extends string> = {
     type: SlotType.SingleSlot;
     name: T;
     getId(): string;

package/lib/xstateTree.js

@@ -77,7 +77,8 @@ function useSlots(interpreter, slots) {
                 [slot]: () => {
                     // eslint-disable-next-line react-hooks/rules-of-hooks
                     const [__, children] = useService(interpreter);
-                    if (slot.toString().endsWith("s")) {
+                    console.log(slot.toString());
+                    if (slot.toString().endsWith("Multi")) {
                         const MultiView = getMultiSlotViewForChildren(interpreter, slot.toLowerCase());
                         return React.createElement(MultiView, null);
                     }
@@ -237,7 +238,7 @@ export function buildRootComponent(machine, routing) {
                     // params/query to ensure that all params/query are present
                     query: { ...((_a = activeRoutesEvent.query) !== null && _a !== void 0 ? _a : {}) },
                     params: { ...((_b = activeRoutesEvent.params) !== null && _b !== void 0 ? _b : {}) },
-                    meta: { ...((_c = activeRoutesEvent.meta) !== null && _c !== void 0 ? _c : {}) },
+                    meta: { replace: true, ...((_c = activeRoutesEvent.meta) !== null && _c !== void 0 ? _c : {}) },
                 });
                 activeRoute.navigate(routeArguments);
             });

package/package.json

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