refactoring next part

src/lib/components/refactor/ComposerAlice.svelte

@@ -5,7 +5,7 @@
 	let childData;
 
 	$: if (me.do) {
-		childData = me.do.core.subscribeData('@ComposerBob');
+		childData = me.do.core.subscribeData('ComposerBob');
 	}
 
 	$: {

src/lib/components/refactor/ComposerCharly.svelte

@@ -1,8 +1,32 @@
 <script>
+	import { onMount } from 'svelte';
+	import { coreServices } from '$lib/core/refactor/coreServices';
+
 	export let me;
+	export let data;
+
+	onMount(() => {
+		// coreServices.mutateData('ComposerCharly', { hello: ' this is on mount ' });
+	});
+	function toggle() {
+		me.do.machine.send('TOGGLE');
+	}
 </script>
 
 <div class="border-2 border-green-500">
 	<p>My ID is: {me.id}</p>
+	my state is {$data.state}
 	<h1 class="h1">I am charly</h1>
+	my data.context prop: {JSON.stringify($data.context)}
+	<br />
+	<button
+		class="px-4 py-2 font-bold text-white bg-blue-500 rounded hover:bg-blue-700"
+		on:click={toggle}
+	>
+		Toggle
+	</button>
+
+	<!-- {#each $data.context.messages as message (message.timestamp)}
+		<p>{message.text}</p>
+	{/each} -->
 </div>

src/lib/components/refactor/ComposerWrap.svelte

@@ -1,5 +1,8 @@
-<script>
+<script lang="ts">
 	import Composer from '$lib/core/refactor/Composer.svelte';
+	import { assign } from 'xstate';
+	import { coreServices } from '$lib/core/refactor/coreServices';
+	import { queryMessages } from '$lib/data/queryMessages';
 
 	let composer = {
 		id: 'ComposerParent',
@@ -26,18 +29,31 @@
 			{
 				id: 'ComposerCharly',
 				component: 'ComposerCharly',
-				data: {
-					context: { messenges: 'put the messengesStore here' }
-				},
 				slot: 'aside',
+				data: {},
 				machine: {
-					initial: 'NOTREADY',
+					initial: 'LOADING',
+					context: {
+						hello: 'start',
+						messages: []
+					},
 					states: {
-						NOTREADY: {
+						LOADING: {
-							on: { TOGGLE: 'READY' }
+							on: {
+								TOGGLE: {
+									target: 'READY',
+									actions: assign({
+										hello: (context, event) => 'this was updated from loading'
+									})
+								}
+							}
 						},
 						READY: {
-							on: { TOGGLE: 'NOTREADY' }
+							on: {
+								TOGGLE: {
+									target: 'LOADING'
+								}
+							}
 						}
 					}
 				}
@@ -46,11 +62,8 @@
 				id: 'ComposerBob',
 				component: 'ComposerBob',
 				slot: 'top',
-				data: {
-					machine: { state: 'NOTREADY' }
-				},
 				machine: {
-					initial: 'NOTREADY',
+					initial: 'READY',
 					states: {
 						NOTREADY: {
 							on: { TOGGLE: 'READY' }

src/lib/core/refactor/Composer.svelte

@@ -43,12 +43,22 @@
 			});
 		}
 		if (composer?.machine) {
-			const machine = Machine({ ...composer.machine, id: composer.id });
+			const machine = Machine(
+				{
+					...composer.machine,
+					id: composer.id
+				},
+				{
+					services: composer.machine.services
+				}
+			);
 			machineService = interpret(machine).onTransition((state) => {
+				console.log(`${composer.id} State transitioned to: ${state.value}`);
+				console.log('Context:', state.context); // Log the context
 				getComposerStore(composer.id).update((storeValue) => ({
 					...storeValue,
-					state: state.value, // updated
+					state: state.value,
-					context: state.context // added
+					context: state.context
 				}));
 			});
 			machineService.start();
@@ -58,8 +68,15 @@
 		if (composer?.children) {
 			composer.children.forEach((child) => {
 				if (child.machine) {
-					const childMachine = Machine({ ...child.machine, id: child.id });
+					const childMachine = Machine(
+						{ ...child.machine, id: child.id },
+						{
+							services: child.machine.services
+						}
+					);
 					machineService = interpret(childMachine).onTransition((state) => {
+						console.log(`${child.id} State transitioned to: ${state.value}`);
+						console.log('Context:', state.context); // Log the context
 						getComposerStore(child.id).update((storeValue) => ({
 							...storeValue,
 							state: state.value, // updated

src/lib/core/refactor/coreServices.ts

@@ -2,18 +2,15 @@
 import { getComposerStore } from './composerStores';
 
 export const coreServices = {
-    mutateData: (mappings: Record<string, string>) => {
+    mutateData: (storeID: string, value: any) => {
-        for (const [mappingString, value] of Object.entries(mappings)) {
+        const store = getComposerStore(storeID);
-            const [storeID, key] = mappingString.replace('@', '').split(':');
+        console.log(`mutateData called with storeID: ${storeID} and value: ${JSON.stringify(value)}`);
-            const store = getComposerStore(storeID);
+        store.update(storeData => {
-            store.update(storeData => {
+            storeData.context = value;
-                storeData[key] = value;
+            return storeData;
-                return storeData;
+        });
-            });
-        }
     },
-    subscribeData: (mappingString: string) => {
+    subscribeData: (storeID: string) => {
-        const [storeID] = mappingString.replace('@', '').split(':');
         const store = getComposerStore(storeID);
         return store;
     },