Refactoring next part

src/lib/components/Messages.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
 	import Composite from '$lib/core/Composite.svelte';
-	import { Avatar } from '@skeletonlabs/skeleton';
 
 	export let store;
 

src/lib/components/refactor/ComposerAlice.svelte

@@ -1,19 +1,16 @@
 <script>
 	export let me;
-	export let services;
-	export let store;
+	export let data;
 
-	export let machineService;
-
-	let childStore;
+	let childData;
 
 	$: if (me.do) {
-		childStore = me.do.core.subscribeComposer('@ComposerBob');
+		childData = me.do.core.subscribeData('@ComposerBob');
 	}
 
 	$: {
-		if ($childStore && $childStore.machine.state) {
-			me.do.machine.send($childStore.machine.state);
+		if ($childData && $childData.state) {
+			me.do.machine.send($childData.state);
 		}
 	}
 </script>
@@ -21,9 +18,9 @@
 <div class="p-2 border-2 border-blue-500">
 	<p>My ID is: {me.id}</p>
 
-	I am the parent, this is my state: {$store.machine.state}
+	I am the parent, this is my state: {$data.state}
 	<div
 		class="p-2 border-2"
-		style="background-color: {$store.machine.state}; border-radius: 50%; width: 50px; height: 50px;"
+		style="background-color: {$data.state}; border-radius: 50%; width: 50px; height: 50px;"
 	/>
 </div>

src/lib/components/refactor/ComposerBob.svelte

@@ -1,12 +1,9 @@
 <script>
 	export let me;
-	export let store;
-	export let machineService;
+	export let data;
 
 	const handleButton = () => {
 		if (me && me.do && me.do.machine) {
-			console.log('BOB machine service: ' + JSON.stringify(me.do.machine));
-			console.log('Sending TOGGLE event to the machine');
 			me.do.machine.send('TOGGLE');
 		}
 	};
@@ -15,7 +12,7 @@
 <div class="border-2 border-yellow-500">
 	<p>My ID is: {me.id}</p>
 
-	i am the child and this is my state: {$store.machine.state}
+	i am the child and this is my state: {$data.state}
 	<button
 		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
 		on:click={handleButton}>Switch</button

src/lib/components/refactor/ComposerWrap.svelte

@@ -26,6 +26,9 @@
 			{
 				id: 'ComposerCharly',
 				component: 'ComposerCharly',
+				data: {
+					context: { messenges: 'put the messengesStore here' }
+				},
 				slot: 'aside',
 				machine: {
 					initial: 'NOTREADY',
@@ -43,7 +46,7 @@
 				id: 'ComposerBob',
 				component: 'ComposerBob',
 				slot: 'top',
-				store: {
+				data: {
 					machine: { state: 'NOTREADY' }
 				},
 				machine: {

src/lib/core/refactor/Composer.svelte

@@ -18,7 +18,7 @@
 	interface IComposer {
 		layout?: IComposerLayout;
 		id: string;
-		me?: { id: string; do: any };
+		me?: { id: string; do: any; data: any };
 		slot?: string;
 		component?: string;
 		store?: Record<string, any>;
@@ -27,9 +27,10 @@
 	}
 
 	export let composer: IComposer;
-	let layoutStyle = '';
 
+	let layoutStyle = '';
 	let machineService;
+	let unsubscribers = [];
 
 	$: {
 		layoutStyle = computeLayoutStyle(composer?.layout);
@@ -46,7 +47,8 @@
 			machineService = interpret(machine).onTransition((state) => {
 				getComposerStore(composer.id).update((storeValue) => ({
 					...storeValue,
-					machine: { state: state.value }
+					state: state.value, // updated
+					context: state.context // added
 				}));
 			});
 			machineService.start();
@@ -60,7 +62,8 @@
 					machineService = interpret(childMachine).onTransition((state) => {
 						getComposerStore(child.id).update((storeValue) => ({
 							...storeValue,
-							machine: { state: state.value }
+							state: state.value, // updated
+							context: state.context // added
 						}));
 					});
 					machineService.start();
@@ -92,8 +95,6 @@
 		}
 	}
 
-	let unsubscribers = [];
-
 	onDestroy(() => {
 		unsubscribers.forEach((unsub) => unsub());
 	});
@@ -120,14 +121,14 @@
 </script>
 
 <div
-	class={`grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}`}
+	class={`grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}`}
 	style={layoutStyle}
 >
 	{#await loadComponentAndService(composer) then Component}
 		<svelte:component
 			this={Component}
 			id={composer.id}
-			store={getComposerStore(composer.id)}
+			data={getComposerStore(composer.id)}
 			machine={composer.machine}
 			me={composer.me}
 		/>
@@ -135,14 +136,14 @@
 	{#if composer?.children}
 		{#each composer.children as child (child.id)}
 			<div
-				class="grid w-full h-full overflow-hidden ${composer?.layout?.tailwindClasses || ''}"
+				class="grid w-full h-full overflow-hidden ${composer?.layout?.style || ''}"
 				style={`grid-area: ${child.slot}`}
 			>
 				{#await loadComponentAndService(child) then ChildComponent}
 					<svelte:component
 						this={ChildComponent}
 						id={child.id}
-						store={getComposerStore(child.id)}
+						data={getComposerStore(child.id)}
 						machine={child.machine}
 						me={child.me}
 					/>

src/lib/core/refactor/coreServices.ts

@@ -2,7 +2,7 @@
 import { getComposerStore } from './composerStores';
 
 export const coreServices = {
-    updateComposer: (mappings: Record<string, string>) => {
+    mutateData: (mappings: Record<string, string>) => {
         for (const [mappingString, value] of Object.entries(mappings)) {
             const [storeID, key] = mappingString.replace('@', '').split(':');
             const store = getComposerStore(storeID);
@@ -12,7 +12,7 @@ export const coreServices = {
             });
         }
     },
-    subscribeComposer: (mappingString: string) => {
+    subscribeData: (mappingString: string) => {
         const [storeID] = mappingString.replace('@', '').split(':');
         const store = getComposerStore(storeID);
         return store;