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} />

src/lib/core/refactor/Composer.svelte

@@ -2,7 +2,7 @@
 	import { onDestroy } from 'svelte';
 	import Composer from './Composer.svelte';
 	import FallBack from './FallBack.svelte';
-	import components from '$lib/core/componentLoader';
+	import components from './componentLoader';
 	import services from '$lib/core/servicesLoader';
 	import { dataStore } from '$lib/core/dataLoader';
 	import { createComposerStore, getComposerStore } from './composerStores';

src/lib/core/refactor/ComposerComponent.svelte

@@ -0,0 +1,16 @@
+<!-- ComposerComponent.svelte -->
+<script>
+	import { getComposerStore } from './composerStores';
+	export let Component;
+	export let composer;
+	export let loadedServices;
+</script>
+
+<svelte:component
+	this={Component}
+	id={composer.id}
+	store={getComposerStore(composer.id)}
+	machine={composer.machine}
+	services={loadedServices}
+	machineService={composer.machineService}
+/>

src/lib/core/refactor/componentLoader.ts

@@ -0,0 +1,10 @@
+import componentNames from 'virtual:components-list';
+
+const components = {};
+
+componentNames.forEach(path => {
+    const name = path.split('/').pop();  // Extract just the file name from the path
+    components[name] = () => import( /* @vite-ignore */ `/src/lib/components/${path}.svelte`);
+});
+
+export default components;

src/routes/composer/+page.svelte

@@ -1,59 +1,5 @@
 <script>
-	import Composer from '$lib/core/refactor/Composer.svelte';
+	import ComposerWrap from '$lib/components/refactor/ComposerWrap.svelte';
-
-	let composer = {
-		id: 'ComposerParent',
-		layout: {
-			columns: '1fr 1fr',
-			areas: `
-				"left right"
-			`
-		},
-		children: [
-			{
-				id: 'ComposerBob',
-				component: 'ComposerBob',
-				slot: 'left',
-				store: {
-					machine: { state: 'NOTREADY' }
-				},
-				machine: {
-					initial: 'NOTREADY',
-					states: {
-						NOTREADY: {
-							on: { TOGGLE: 'READY' }
-						},
-						READY: {
-							on: { TOGGLE: 'NOTREADY' }
-						}
-					}
-				}
-			},
-			{
-				id: 'ComposerAlice',
-				component: 'ComposerAlice',
-				slot: 'right',
-				machine: {
-					initial: 'RED',
-					states: {
-						GREEN: {
-							on: { SWITCH: 'YELLOW' }
-						},
-						YELLOW: {
-							on: { SWITCH: 'RED' }
-						},
-						RED: {
-							on: { SWITCH: 'GREEN' }
-						}
-					},
-					on: {
-						READY: 'GREEN',
-						NOTREADY: 'RED'
-					}
-				}
-			}
-		]
-	};
 </script>
 
-<Composer {composer} />
+<ComposerWrap />

src/routes/helloearth/+page.svelte

@@ -11,12 +11,11 @@
 		},
 		layout: {
 			areas: `
-				"main aside"
 				"main aside"
 				"footer footer";
 			`,
 			columns: '1fr 1fr',
-			rows: '1fr 1fr auto'
+			rows: '1fr auto'
 		},
 		children: [
 			{