added dynamic data loading and mapping towards components.

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -3,6 +3,8 @@
 	export let services;
 	export let store;
 
+	// Watch for store changes
+
 	onMount(async () => {
 		if (services && services.helloEarthAlert) {
 			console.log('Alerted by HelloEarthAlert');
@@ -12,10 +14,23 @@
 	});
 </script>
 
-<!-- Only render the div when $store.pkpWallet is defined -->
+{#if !$store}
-{#if $store}
+	<div>Loading store...</div>
-	<div class="p-12 bg-blue-400">Hello Earth {$store.pkpWallet.address}</div>
 {:else}
-	<!-- You can display a loader or placeholder content here -->
+	<div class="p-12 bg-blue-400">
-	<div>Loading...</div>
+		Hello Earth
+		{#if $store.pkpWallet}{$store.pkpWallet.address}{/if}
+		{#if $store.todos && $store.messages}
+			<ul>
+				{#each $store.todos as todo}
+					<li>{todo.name}</li>
+				{/each}
+			</ul>
+			<ul>
+				{#each $store.messages as message}
+					<li>{message.text} - {message.date}</li>
+				{/each}
+			</ul>
+		{/if}
+	</div>
 {/if}

src/lib/core/Composite.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import { onDestroy, onMount } from 'svelte';
 	import Composite from './Composite.svelte';
 	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
+	import { dataStore } from '$lib/core/dataLoader';
 	import { createCompositeStore, getCompositeStore } from '$lib/core/compositeStores';
 
 	interface IComposite {
@@ -34,6 +36,7 @@
 		`
 		: '';
 
+	// Reactive statement to watch changes in the composite prop
 	$: if (composite?.children) {
 		composite.children.forEach((child) => {
 			initializeCompositeState(child);
@@ -59,21 +62,30 @@
 
 			for (const [localKey, external] of Object.entries(component.map)) {
 				const [externalID, externalKey] = external.split('.').map((item) => item.trim());
-				const externalStore = getCompositeStore(externalID);
+
-				if (externalStore) {
+				if (externalID === 'data') {
-					externalStore.subscribe((externalState) => {
+					const unsubscribe = dataStore.subscribe((store) => {
-						console.log('External state:', externalState);
+						if (externalKey in store) {
-						if (externalState && externalKey in externalState) {
 							localStore.update((storeValue) => {
-								storeValue = storeValue || {};
+								return { ...storeValue, [localKey]: store[externalKey] };
-								if (storeValue[localKey] !== externalState[externalKey]) {
-									storeValue[localKey] = externalState[externalKey];
-									return storeValue;
-								}
-								return storeValue;
 							});
 						}
 					});
+
+					onDestroy(unsubscribe);
+				} else {
+					const externalStore = getCompositeStore(externalID);
+					if (externalStore) {
+						const unsubscribe = externalStore.subscribe((externalState) => {
+							if (externalState && externalKey in externalState) {
+								localStore.update((storeValue) => {
+									return { ...storeValue, [localKey]: externalState[externalKey] };
+								});
+							}
+						});
+
+						onDestroy(unsubscribe);
+					}
 				}
 			}
 		}

src/lib/core/dataLoader.ts

@@ -0,0 +1,31 @@
+import { writable } from 'svelte/store';
+
+// Using mock data, in a real-world scenario this could be fetched from an API.
+const queryMessagesData = [
+    {
+        text: 'text1',
+        date: 'date1',
+        id: 'id1'
+    },
+    {
+        text: 'text2',
+        date: 'date2',
+        id: 'id2'
+    }
+];
+
+const queryTodosData = [
+    {
+        name: "todo 1"
+    },
+    {
+        name: "todo 2"
+    },
+    { name: "todo 3" }
+];
+
+// The store that holds the data sets
+export const dataStore = writable({
+    queryMessages: queryMessagesData,
+    queryTodos: queryTodosData
+});

src/lib/data/queryMessages.ts

@@ -0,0 +1,9 @@
+// queryMessages.ts
+import { dataStore } from '$lib/core/dataLoader';
+
+const queryMessages = [
+    { text: 'text', date: 'date', id: 'id' },
+    { text: 'text', date: 'date', id: 'id' }
+];
+
+dataStore.registerData('messages', queryMessages);

src/lib/data/queryTodos.ts

@@ -0,0 +1,9 @@
+// queryTodos.ts
+import { dataStore } from '$lib/core/dataLoader';
+
+const queryTodos = [
+    { name: "todo 1" },
+    { name: "todo 2" }
+];
+
+dataStore.registerData('todos', queryTodos);

src/routes/+page.svelte

@@ -1,5 +1,8 @@
 <script>
 	import Composite from '$lib/core/Composite.svelte';
+	import { dataStore } from '$lib/core/dataLoader';
+
+	$: console.log('Data Store contents:', $dataStore);
 
 	let composite = {
 		id: 'composite',
@@ -29,7 +32,10 @@
 				component: 'HelloEarth',
 				slot: 'top',
 				map: {
-					pkpWallet: 'w.pkpWallet'
+					pkpWallet: 'w.pkpWallet',
+					rpcURL: 'w.rpcURL',
+					messages: 'data.queryMessages',
+					todos: 'data.queryTodos'
 				},
 				services: ['helloEarthAlert']
 			},