Added dynamic instantiation of machines in composite

src/lib/components/Recipies/LearnColor.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { Machine, interpret } from 'xstate';
-
 	export let services;
+	export let store;
 
 	let childStore;
 
@@ -9,44 +8,18 @@
 		childStore = services.core.subscribeComposite('@child');
 	}
 
-	const colorMachine = Machine({
-		id: 'color',
-		initial: 'RED',
-		states: {
-			GREEN: {
-				on: { SWITCH: 'YELLOW' }
-			},
-			YELLOW: {
-				on: { SWITCH: 'RED' }
-			},
-			RED: {
-				on: { SWITCH: 'GREEN' }
-			}
-		},
-		on: {
-			READY: 'GREEN',
-			NOTREADY: 'RED'
-		}
-	});
-
-	let current = colorMachine.initialState.value;
-
-	const service = interpret(colorMachine)
-		.onTransition((state) => {
-			current = state.value;
-		})
-		.start();
-
 	$: {
-		if ($childStore && $childStore.xstate) {
-			service.send($childStore.xstate);
+		if ($childStore && $childStore.machine.state) {
+			services.machine.send($childStore.machine.state);
 		}
 	}
 </script>
 
-<div class="p-2 border-2 border-blue-500">I am the parent, this is my state: {current}</div>
+<div class="p-2 border-2 border-blue-500">
+	I am the parent, this is my state: {$store.machine.state}
+</div>
 <div
 	class="p-2 border-2"
-	style="background-color: {current}; border-radius: 50%; width: 50px; height: 50px;"
+	style="background-color: {$store.machine.state}; border-radius: 50%; width: 50px; height: 50px;"
 />
 <p>The child state: {JSON.stringify($childStore)}</p>

src/lib/components/Recipies/LearnReady.svelte

@@ -11,10 +11,9 @@
 	$: if (machine) {
 		compositeMachine = Machine(machine);
 
-		current = compositeMachine.initialState.value; // remove let
+		current = compositeMachine.initialState.value;
 		service = interpret(compositeMachine).onTransition((state) => {
-			current = state.value;
-			$store.xstate = state.value;
+			$store.machine.state = state.value;
 		});
 
 		service.start();
@@ -22,9 +21,7 @@
 </script>
 
 <div class="border-2 border-yellow-500">
-	{#if machine}
-		i am the child and this is my state: {current}
-	{/if}
+	i am the child and this is my state: {$store.machine.state}
 	<button
 		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
 		on:click={() => service.send('TOGGLE')}>Switch</button

src/lib/components/Recipies/machines/toggleMachine.ts

@@ -0,0 +1,14 @@
+import { Machine } from 'xstate';
+
+export const toggleMachine = Machine({
+    id: 'toggleMachine',
+    initial: 'NOTREADY',
+    states: {
+        NOTREADY: {
+            on: { TOGGLE: 'READY' }
+        },
+        READY: {
+            on: { TOGGLE: 'NOTREADY' }
+        }
+    }
+});

src/lib/components/Recipies/oRecipe.svelte

@@ -19,7 +19,7 @@
 				component: 'LearnReady',
 				slot: 'left',
 				store: {
-					xstate: 'NOTREADY'
+					machine: { state: 'NOTREADY' }
 				},
 				machine: {
 					id: 'compositemachine',
@@ -35,9 +35,28 @@
 				}
 			},
 			{
-				id: 'parent',
+				id: 'learncolor',
 				component: 'LearnColor',
-				slot: 'right'
+				slot: 'right',
+				machine: {
+					id: 'color',
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
 			}
 		]
 	};