Merge pull request #32 from koordinates/improve-multi-slots

Author: UberMouse

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.
 

examples/todomvc/App.tsx

@@ -183,7 +183,7 @@ const view = buildView(
                 <label htmlFor="toggle-all">Mark all as complete</label>
 
                 <ul className="todo-list">
-                  <slots.Todos />
+                  <slots.TodosMulti />
                 </ul>
               </section>
 

src/slots/slots.spec.ts

@@ -5,7 +5,7 @@ describe("slot utilities", () => {
     it("returns an object that allows you to generate slot ids given an id", () => {
       const slot = multiSlot("Names");
 
-      expect(slot.getId("id")).toEqual("id-names-slots");
+      expect(slot.getId("id")).toEqual("id-namesmulti-slots");
     });
   });
 
@@ -26,8 +26,8 @@ describe("slot utilities", () => {
       // should be "foo" | "bar"
       type Foo = GetSlotNames<typeof slots>;
 
-      const fooTest: "foo" = "foo" as const;
-      const barTest: "bar" = "bar" as const;
+      const fooTest = "fooMulti" as const;
+      const barTest = "bar" as const;
       const invalidTest: "invalid" = "invalid" as const;
       const _fooOtherTest: Foo = fooTest;
       const _barOtherTest: Foo = barTest;

src/slots/slots.ts

@@ -9,7 +9,7 @@ export enum SlotType {
 /**
  * @public
  */
-export type SingleSlot<T> = {
+export type SingleSlot<T extends string> = {
   type: SlotType.SingleSlot;
   name: T;
   getId(): string;
@@ -18,9 +18,9 @@ export type SingleSlot<T> = {
 /**
  * @public
  */
-export type MultiSlot<T> = {
+export type MultiSlot<T extends string> = {
   type: SlotType.MultiSlot;
-  name: T;
+  name: `${T}Multi`;
   getId(id: string): string;
 };
 
@@ -46,8 +46,8 @@ export function singleSlot<T extends string>(name: T): SingleSlot<T> {
 export function multiSlot<T extends string>(name: T): MultiSlot<T> {
   return {
     type: SlotType.MultiSlot,
-    name,
-    getId: (id: string) => `${id}-${name.toLowerCase()}-slots`,
+    name: `${name}Multi`,
+    getId: (id: string) => `${id}-${name.toLowerCase()}multi-slots`,
   };
 }
 

src/test-app/TodosMachine.tsx

@@ -252,7 +252,7 @@ const TodosView = buildView(
               />
               <label htmlFor="toggle-all">Mark all as complete</label>
               <ul className="todo-list">
-                <slots.Todos />
+                <slots.TodosMulti />
               </ul>
             </section>
             <footer className="footer">

src/xstateTree.tsx

@@ -127,7 +127,8 @@ function useSlots<TSlots extends readonly 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()

xstate-tree.api.md

@@ -195,9 +195,9 @@ export type Meta<T> = T extends {
 } ? TMeta : undefined;
 
 // @public (undocumented)
-export type MultiSlot<T> = {
+export type MultiSlot<T extends string> = {
     type: SlotType.MultiSlot;
-    name: T;
+    name: `${T}Multi`;
     getId(id: string): string;
 };
 
@@ -313,7 +313,7 @@ export type SharedMeta = {
 };
 
 // @public (undocumented)
-export type SingleSlot<T> = {
+export type SingleSlot<T extends string> = {
     type: SlotType.SingleSlot;
     name: T;
     getId(): string;