refactoring composer part2

src/lib/components/refactor/ComposerCharly.svelte

@@ -0,0 +1,52 @@
+<script>
+	export let services;
+	export let store;
+
+	let isStoreLoaded = false;
+
+	$: if (services && services.helloEarthAlert) {
+		// services.helloEarthAlert.alertMe();
+	}
+	$: if (services.core) {
+		// services.core.testAlert();
+	}
+
+	$: if ($store) isStoreLoaded = true;
+</script>
+
+{#if isStoreLoaded}
+	<div class="container p-12">
+		<h1 class="h1">
+			{#if $store.title}{$store.title}{/if}
+		</h1>
+		<h2 class="py-6 h2">
+			{#if $store.description}{$store.description}{/if}
+		</h2>
+		<h3 class="mt-4 h3">Wallet Address</h3>
+		{#if $store.pkpWallet}
+			<p>{$store.pkpWallet.address}</p>
+		{/if}
+
+		<h4 class="mt-4 h4">store: hello (init default)</h4>
+		{#if $store.hello}{$store.hello}{/if}
+		<h4 class="mt-4 h4">map: hello2 : "@hello:helloMapMe"</h4>
+		{#if $store.hello2}{$store.hello2}{/if}
+
+		<h4 class="mt-4 h4">map: "todos": "@data:queryTodos"</h4>
+		{#if $store.todos}
+			<dl class="list-dl">
+				{#each $store.todos as todo}
+					<div>
+						<span class="flex-auto">
+							<dd>{todo.text}</dd>
+						</span>
+					</div>
+				{/each}
+			</dl>
+		{/if}
+	</div>
+{:else}
+	<div class="container">
+		<p>Loading...</p>
+	</div>
+{/if}

src/lib/components/refactor/ComposerWrap.svelte

@@ -0,0 +1,107 @@
+<script>
+	import Composer from '$lib/core/refactor/Composer.svelte';
+
+	let composer = {
+		id: 'ComposerParent',
+		store: {
+			title: 'Hello Earth',
+			description:
+				'how to use the store and mapping logic of store to store and data to store maps',
+			helloMapMe: 'this is going to be mapped'
+		},
+		machine: {
+			initial: 'NOTREADY',
+			states: {
+				NOTREADY: {
+					on: { TOGGLE: 'READY' }
+				},
+				READY: {
+					on: { TOGGLE: 'NOTREADY' }
+				}
+			}
+		},
+		layout: {
+			columns: '1fr 1fr',
+			rows: '1fr 1fr',
+			areas: `
+				"top aside"
+				"bottom aside"
+			`
+		},
+		children: [
+			{
+				id: 'ComposerCharly',
+				component: 'ComposerCharly',
+				slot: 'aside',
+				machine: {
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				},
+				store: {
+					machine: { state: 'NOTREADY' },
+					hello: 'define me directly',
+					hello2: 'overwrite me with the mapping value'
+				},
+				map: {
+					title: '@hello:title',
+					description: '@hello:description',
+					hello2: '@hello:helloMapMe',
+					pkpWallet: '@wallet:pkpWallet',
+					todos: '@data:queryTodos'
+				},
+				services: ['helloEarthAlert']
+			},
+			{
+				id: 'ComposerBob',
+				component: 'ComposerBob',
+				slot: 'top',
+				store: {
+					machine: { state: 'NOTREADY' }
+				},
+				machine: {
+					initial: 'NOTREADY',
+					states: {
+						NOTREADY: {
+							on: { TOGGLE: 'READY' }
+						},
+						READY: {
+							on: { TOGGLE: 'NOTREADY' }
+						}
+					}
+				}
+			},
+			{
+				id: 'ComposerAlice',
+				component: 'ComposerAlice',
+				slot: 'bottom',
+				machine: {
+					initial: 'RED',
+					states: {
+						GREEN: {
+							on: { SWITCH: 'YELLOW' }
+						},
+						YELLOW: {
+							on: { SWITCH: 'RED' }
+						},
+						RED: {
+							on: { SWITCH: 'GREEN' }
+						}
+					},
+					on: {
+						READY: 'GREEN',
+						NOTREADY: 'RED'
+					}
+				}
+			}
+		]
+	};
+</script>
+
+<Composer {composer} />