diff --git a/src/lib/components/refactor/ComposerAlice.svelte b/src/lib/components/refactor/ComposerAlice.svelte
index 1c7eb52..4574c83 100644
--- a/src/lib/components/refactor/ComposerAlice.svelte
+++ b/src/lib/components/refactor/ComposerAlice.svelte
@@ -1,26 +1,28 @@
-
My ID is: {me.id}
+
My ID is: {$me.id}
- My state is: {$data.state}
+ My state is: {$me.state}
diff --git a/src/lib/components/refactor/ComposerBob.svelte b/src/lib/components/refactor/ComposerBob.svelte
index 9393b90..cd9e3a6 100644
--- a/src/lib/components/refactor/ComposerBob.svelte
+++ b/src/lib/components/refactor/ComposerBob.svelte
@@ -1,18 +1,17 @@
-
My ID is: {me.id}
+
My ID is: {$me.id}
- My state is: {$data.state}
+ My state is: {$me.state}
Switch
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 @@
- My ID is: {me.id}
+ My ID is: {$me.id}
- 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}
{todo.text}
{/each}
{/if}
@@ -32,8 +31,8 @@
Send
- {#if $data.store.messages}
- {#each $data.store.messages as message}
+ {#if $me.store.messages}
+ {#each $me.store.messages as message}
{message.text}
{/each}
{/if}
diff --git a/src/lib/components/refactor/ComposerForm.svelte b/src/lib/components/refactor/ComposerForm.svelte
index 02b9b66..868e8f5 100644
--- a/src/lib/components/refactor/ComposerForm.svelte
+++ b/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 @@
- My state is: {$data.state}
+ My state is: {$me.state}
{#if $successMessage}
@@ -154,7 +153,7 @@
Submit
diff --git a/src/lib/core/refactor/Composer.svelte b/src/lib/core/refactor/Composer.svelte
index 052cc9d..37e3c3a 100644
--- a/src/lib/core/refactor/Composer.svelte
+++ b/src/lib/core/refactor/Composer.svelte
@@ -60,20 +60,19 @@
subscribeAndMapQueries(component.id, component.data.map);
}
}
-
- if (component.children) {
- component.children.forEach(loadComponentAndInitializeState);
- }
-
- // Load component and service
- const componentName = component.component || 'FallBack';
- component.me = {
+ getComposerStore(component.id).update((storeValue) => ({
+ ...storeValue,
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}
-
+
{/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}
-
+
{#if child.children && child.children.length}
{/if}