Refactored composer component interface to one single $me store

src/lib/components/refactor/ComposerAlice.svelte

@@ -1,26 +1,28 @@
 <script>
 	export let me;
-	export let data;
 
-	let childData;
+	let composerBob;
 
-	$: if (me.do) {
+	$: {
-		childData = me.do.core.subscribeData('ComposerBob');
+		if ($me.do.core) {
+			composerBob = $me.do.core.subscribeData('ComposerBob');
+		}
 	}
 
 	$: {
-		if ($childData && $childData.state) {
+		if ($composerBob.state) {
-			me.do.machine.send($childData.state);
+			$me.do.machine.send($composerBob.state);
 		}
 	}
+	// Call testAlert
 </script>
 
 <div class="p-8 border-2 border-blue-500">
-	<p>My ID is: {me.id}</p>
+	<p>My ID is: {$me.id}</p>
 
-	My state is: {$data.state}
+	My state is: {$me.state}
 	<div
 		class="p-2 border-2"
-		style="background-color: {$data.state}; border-radius: 50%; width: 50px; height: 50px;"
+		style="background-color: {$me.state}; border-radius: 50%; width: 50px; height: 50px;"
 	/>
 </div>

src/lib/components/refactor/ComposerBob.svelte

@@ -1,18 +1,17 @@
 <script>
 	export let me;
-	export let data;
 
 	const handleButton = () => {
-		if (me && me.do && me.do.machine) {
+		if ($me.do.machine) {
-			me.do.machine.send('TOGGLE');
+			$me.do.machine.send('TOGGLE');
 		}
 	};
 </script>
 
 <div class="p-8 border-2 border-yellow-500">
-	<p>My ID is: {me.id}</p>
+	<p>My ID is: {$me.id}</p>
 
-	My state is: {$data.state}
+	My state is: {$me.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/ComposerCharly.svelte

@@ -1,7 +1,6 @@
 <script>
 	import { createMessage } from '$lib/services/messages/messages';
 	export let me;
-	export let data;
 
 	function sendMessage() {
 		const randomNumber = Math.floor(Math.random() * 100) + 1;
@@ -16,11 +15,11 @@
 
 <div class="flex flex-col h-screen border-2 border-green-500">
 	<section class="p-8 h-96">
-		<p>My ID is: {me.id}</p>
+		<p>My ID is: {$me.id}</p>
 
-		My state is: {$data.state}
+		My state is: {$me.state}
-		{#if $data.store.todos}
+		{#if $me.store.todos}
-			{#each $data.store.todos as todo}
+			{#each $me.store.todos as todo}
 				<p>{todo.text}</p>
 			{/each}
 		{/if}
@@ -32,8 +31,8 @@
 		Send
 	</button>
 	<section class="flex-grow p-8 overflow-y-auto">
-		{#if $data.store.messages}
+		{#if $me.store.messages}
-			{#each $data.store.messages as message}
+			{#each $me.store.messages as message}
 				<p>{message.text}</p>
 			{/each}
 		{/if}

src/lib/components/refactor/ComposerForm.svelte

@@ -5,7 +5,6 @@
 	import { writable } from 'svelte/store';
 	import { RangeSlider, SlideToggle } from '@skeletonlabs/skeleton';
 
-	export let data;
 	export let me;
 
 	const initialFormData = {
@@ -33,9 +32,9 @@
 	$: {
 		// Send events to the state machine based on the validation status
 		if (!($errors.name || $errors.email || $errors.about || $errors.age || $errors.favoriteFood)) {
-			me.do.machine.send('VALIDATE');
+			$me.do.machine.send('VALIDATE');
 		} else {
-			me.do.machine.send('INVALIDATE');
+			$me.do.machine.send('INVALIDATE');
 		}
 	}
 
@@ -71,7 +70,7 @@
 </script>
 
 <div class="w-full p-6 border-2 border-red-500">
-	My state is: {$data.state}
+	My state is: {$me.state}
 	{#if $successMessage}
 		<aside class="w-full max-w-md p-4 alert variant-ghost" id="message-container">
 			<div class="alert-message">
@@ -154,7 +153,7 @@
 			<button
 				type="submit"
 				class="w-full px-4 py-2 mt-4 text-white bg-blue-500 rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500"
-				disabled={$data.state === 'notValidated'}
+				disabled={$me.state === 'notValidated'}
 			>
 				Submit
 			</button>

src/lib/core/refactor/Composer.svelte

@@ -60,20 +60,19 @@
 				subscribeAndMapQueries(component.id, component.data.map);
 			}
 		}
-
+		getComposerStore(component.id).update((storeValue) => ({
-		if (component.children) {
+			...storeValue,
-			component.children.forEach(loadComponentAndInitializeState);
-		}
-
-		// Load component and service
-		const componentName = component.component || 'FallBack';
-		component.me = {
 			id: component.id,
 			do: {
 				core: coreServices,
 				machine: component.machineService || null
 			}
-		};
+		}));
+
+		if (component.children) {
+			component.children.forEach(loadComponentAndInitializeState);
+		}
+		const componentName = component.component || 'FallBack';
 		return await getComponent(componentName);
 	}
 
@@ -128,12 +127,7 @@
 	style={layoutStyle}
 >
 	{#await loadComponentAndInitializeState(composer) then Component}
-		<svelte:component
+		<svelte:component this={Component} id={composer.id} me={getComposerStore(composer.id)} />
-			this={Component}
-			id={composer.id}
-			data={getComposerStore(composer.id)}
-			me={composer.me}
-		/>
 	{/await}
 	{#if composer?.children}
 		{#each composer.children as child (child.id)}
@@ -142,12 +136,7 @@
 				style={`grid-area: ${child.slot}`}
 			>
 				{#await loadComponentAndInitializeState(child) then ChildComponent}
-					<svelte:component
+					<svelte:component this={ChildComponent} id={child.id} me={getComposerStore(child.id)} />
-						this={ChildComponent}
-						id={child.id}
-						data={getComposerStore(child.id)}
-						me={child.me}
-					/>
 					{#if child.children && child.children.length}
 						<Composer composer={child} />
 					{/if}