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) {
-			me.do.machine.send($childData.state);
+		if ($composerBob.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) {
-			me.do.machine.send('TOGGLE');
+		if ($me.do.machine) {
+			$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}
-		{#if $data.store.todos}
-			{#each $data.store.todos as todo}
+		My state is: {$me.state}
+		{#if $me.store.todos}
+			{#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}
-			{#each $data.store.messages as message}
+		{#if $me.store.messages}
+			{#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>