mapped all services to our new me.do. prop

src/lib/components/refactor/ComposerAlice.svelte

@@ -8,11 +8,12 @@
 	let childStore;
 
 	$: if (me.do) {
-		childStore = me.do.subscribeComposer('@ComposerBob');
+		childStore = me.do.core.subscribeComposer('@ComposerBob');
 	}
 
 	$: {
 		if ($childStore && $childStore.machine.state) {
+			console.log('ALICE machine service: ' + JSON.stringify(me.do.machine));
 			me.do.machine.send($childStore.machine.state);
 		}
 	}

src/lib/components/refactor/ComposerBob.svelte

@@ -4,9 +4,9 @@
 	export let machineService;
 
 	const handleButton = () => {
-		console.log('learn ready machine: ' + JSON.stringify(machineService));
+		console.log('BOB machine service: ' + JSON.stringify(me.do.machine));
 		console.log('Sending TOGGLE event to the machine');
-		machineService.send('TOGGLE');
+		me.do.machine.send('TOGGLE');
 	};
 </script>
 

src/lib/core/refactor/Composer.svelte

@@ -35,6 +35,12 @@
 
 	let machineService;
 
+	let services: Record<string, any> = {
+		core: coreServices,
+		machine: null
+		// otherFutureService: null,
+	};
+
 	$: {
 		layoutStyle = computeLayoutStyle(composer?.layout);
 
@@ -47,28 +53,30 @@
 		}
 		if (composer?.machine) {
 			const machine = Machine({ ...composer.machine, id: composer.id });
-			machineService = interpret(machine).onTransition((state) => {
+			let composerMachineService = interpret(machine).onTransition((state) => {
 				getComposerStore(composer.id).update((storeValue) => ({
 					...storeValue,
 					machine: { state: state.value }
 				}));
 			});
-			machineService.start();
-			composer.machineService = machineService;
+			composerMachineService.start();
+			composer.me.do.machine = composerMachineService;
+			composer.machineService = composerMachineService;
 		}
 
 		if (composer?.children) {
 			composer.children.forEach((child) => {
 				if (child.machine) {
 					const childMachine = Machine({ ...child.machine, id: child.id });
-					machineService = interpret(childMachine).onTransition((state) => {
+					let childMachineService = interpret(childMachine).onTransition((state) => {
 						getComposerStore(child.id).update((storeValue) => ({
 							...storeValue,
 							machine: { state: state.value }
 						}));
 					});
-					machineService.start();
-					child.machineService = machineService;
+					childMachineService.start();
+					child.me.do.machine = childMachineService;
+					child.machineService = childMachineService;
 				}
 			});
 		}
@@ -109,15 +117,16 @@
 		}
 		return FallBack;
 	}
-
 	async function loadComponentAndService(component: IComposer) {
 		const componentName = component.component || 'FallBack';
+		let services = {
+			core: coreServices,
+			machine: component.machineService || null
+			// otherFutureService: null,
+		};
 		component.me = {
 			id: component.id,
-			do: {
-				...loadedServices.core,
-				machine: component.machineService || null
-			}
+			do: services
 		};
 		return await getComponent(componentName);
 	}
@@ -133,8 +142,6 @@
 			id={composer.id}
 			store={getComposerStore(composer.id)}
 			machine={composer.machine}
-			services={loadedServices}
-			machineService={child.machineService}
 			me={composer.me}
 		/>
 	{/await}
@@ -150,8 +157,6 @@
 						id={child.id}
 						store={getComposerStore(child.id)}
 						machine={child.machine}
-						services={loadedServices}
-						machineService={child.machineService}
 						me={child.me}
 					/>
 					{#if child.children && child.children.length}