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: {

src/lib/core/Composite.svelte

@@ -28,6 +28,7 @@
 		children?: IComposite[];
 		servicesLoaded?: boolean;
 		machine?: any;
+		machineService?: any;
 	}
 
 	export let composite: IComposite;
@@ -35,6 +36,7 @@
 		core: coreServices
 	};
 	let layoutStyle = '';
+
 	let machineService;
 
 	$: {
@@ -52,7 +54,7 @@
 			});
 		}
 		if (composite?.machine) {
-			const machine = Machine(composite.machine);
+			const machine = Machine({ ...composite.machine, id: composite.id });
 			machineService = interpret(machine).onTransition((state) => {
 				getCompositeStore(composite.id).update((storeValue) => ({
 					...storeValue,
@@ -60,13 +62,13 @@
 				}));
 			});
 			machineService.start();
-			loadedServices.machine = machineService;
+			composite.machineService = machineService;
 		}
 
 		if (composite?.children) {
 			composite.children.forEach((child) => {
 				if (child.machine) {
-					const childMachine = Machine(child.machine);
+					const childMachine = Machine({ ...child.machine, id: child.id });
 					machineService = interpret(childMachine).onTransition((state) => {
 						getCompositeStore(child.id).update((storeValue) => ({
 							...storeValue,
@@ -74,7 +76,7 @@
 						}));
 					});
 					machineService.start();
-					loadedServices.machine = machineService;
+					child.machineService = machineService;
 				}
 			});
 		}
@@ -217,6 +219,7 @@
 				store={getCompositeStore(composite.id)}
 				machine={composite.machine}
 				services={loadedServices}
+				machineService={child.machineService}
 			/>
 		{/await}
 	{/if}
@@ -234,6 +237,7 @@
 							store={getCompositeStore(child.id)}
 							machine={child.machine}
 							services={loadedServices}
+							machineService={child.machineService}
 						/>
 						{#if child.children && child.children.length}
 							<Composite composite={child} />