added dynamic data loading and mapping towards components.

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) {
-					externalStore.subscribe((externalState) => {
-						console.log('External state:', externalState);
-						if (externalState && externalKey in externalState) {
+
+				if (externalID === 'data') {
+					const unsubscribe = dataStore.subscribe((store) => {
+						if (externalKey in store) {
 							localStore.update((storeValue) => {
-								storeValue = storeValue || {};
-								if (storeValue[localKey] !== externalState[externalKey]) {
-									storeValue[localKey] = externalState[externalKey];
-									return storeValue;
-								}
-								return storeValue;
+								return { ...storeValue, [localKey]: store[externalKey] };
 							});
 						}
 					});
+
+					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
+});