Updated the Messages to the new abstracted composite syntax.

src/lib/core/Composite.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onDestroy, onMount } from 'svelte';
+	import { onDestroy } from 'svelte';
 	import Composite from './Composite.svelte';
 	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
@@ -66,9 +66,19 @@
 				if (externalID === 'data') {
 					const unsubscribe = dataStore.subscribe((store) => {
 						if (externalKey in store) {
-							localStore.update((storeValue) => {
-								return { ...storeValue, [localKey]: store[externalKey] };
-							});
+							// Check if the data item is a Svelte store
+							if (store[externalKey] && typeof store[externalKey].subscribe === 'function') {
+								let innerUnsub = store[externalKey].subscribe((value) => {
+									localStore.update((storeValue) => {
+										return { ...storeValue, [localKey]: value };
+									});
+								});
+								onDestroy(innerUnsub);
+							} else {
+								localStore.update((storeValue) => {
+									return { ...storeValue, [localKey]: store[externalKey] };
+								});
+							}
 						}
 					});
 

src/lib/core/dataLoader.ts

@@ -1,31 +1,11 @@
+// dataLoader.ts
+
 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" }
-];
+import { queryMessagesData } from '$lib/data/queryMessages';
+import { queryTodosData } from '$lib/data/queryTodos';
 
 // The store that holds the data sets
 export const dataStore = writable({
     queryMessages: queryMessagesData,
     queryTodos: queryTodosData
-});
+});