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: {
-							on: { TOGGLE: 'READY' }
+						LOADING: {
+							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' }