fixed a bug of dynamic machine service initializded in in composite

src/lib/components/Recipies/LearnColor.svelte

@@ -2,15 +2,18 @@
 	export let services;
 	export let store;
 
+	export let machineService;
+
 	let childStore;
 
 	$: if (services.core) {
-		childStore = services.core.subscribeComposite('@child');
+		childStore = services.core.subscribeComposite('@learnready');
 	}
 
 	$: {
 		if ($childStore && $childStore.machine.state) {
-			services.machine.send($childStore.machine.state);
+			console.log('learn color machine: ' + JSON.stringify(machineService));
+			machineService.send($childStore.machine.state);
 		}
 	}
 </script>
@@ -22,4 +25,3 @@
 	class="p-2 border-2"
 	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

@@ -1,29 +1,19 @@
 <script>
-	import { interpret, Machine } from 'xstate';
-
 	export let store;
-	let service;
-	let current;
-	export let machine;
+	export let services;
+	export let machineService;
 
-	let compositeMachine;
-
-	$: if (machine) {
-		compositeMachine = Machine(machine);
-
-		current = compositeMachine.initialState.value;
-		service = interpret(compositeMachine).onTransition((state) => {
-			$store.machine.state = state.value;
-		});
-
-		service.start();
-	}
+	const handleButton = () => {
+		console.log('learn ready machine: ' + JSON.stringify(machineService));
+		console.log('Sending TOGGLE event to the machine');
+		machineService.send('TOGGLE');
+	};
 </script>
 
 <div class="border-2 border-yellow-500">
 	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
+		on:click={handleButton}>Switch</button
 	>
 </div>

src/lib/components/Recipies/oRecipe.svelte

@@ -1,10 +1,7 @@
 <!-- src/lib/components/Recipies/oRecipe.svelte -->
 <script>
-	import { interpret } from 'xstate';
 	import Composite from '$lib/core/Composite.svelte';
 
-	// export let machine;
-
 	let composite = {
 		id: 'testingstuff',
 		layout: {
@@ -15,14 +12,13 @@
 		},
 		children: [
 			{
-				id: 'child',
+				id: 'learnready',
 				component: 'LearnReady',
 				slot: 'left',
 				store: {
 					machine: { state: 'NOTREADY' }
 				},
 				machine: {
-					id: 'compositemachine',
 					initial: 'NOTREADY',
 					states: {
 						NOTREADY: {
@@ -39,7 +35,6 @@
 				component: 'LearnColor',
 				slot: 'right',
 				machine: {
-					id: 'color',
 					initial: 'RED',
 					states: {
 						GREEN: {