feat(core): introduce reactive services loading mechanism

src/lib/components/HelloEarth/HelloEarth.svelte

@@ -1,20 +1,12 @@
 <script>
-	import { onMount } from 'svelte';
 	export let services;
 	export let store;
 
-	let isServicesLoaded = false;
 	let isStoreLoaded = false;
 
-	onMount(async () => {
+	$: if (services && services.helloEarthAlert) {
-		// Check services loading
+		// services.helloEarthAlert.alertMe();
-		if (services.helloEarthAlert) {
+	}
-			// services.helloEarthAlert.alertMe();
-			isServicesLoaded = true;
-		} else {
-			console.error('helloEarthAlert not loaded');
-		}
-	});
 
 	$: if ($store) isStoreLoaded = true;
 </script>

src/lib/core/Composite.svelte

@@ -27,6 +27,17 @@
 
 	export let composite: IComposite;
 
+	let loadedServices: Record<string, any> = {};
+
+	// Reactive loading mechanism for services based on composite changes
+	$: if (composite?.services) {
+		composite.services.forEach(async (serviceName) => {
+			if (!loadedServices[serviceName]) {
+				loadedServices[serviceName] = await loadService(serviceName);
+			}
+		});
+	}
+
 	$: layoutStyle = composite?.layout
 		? `
 		grid-template-areas: ${composite.layout.areas};
@@ -141,13 +152,13 @@
 
 <div class={`grid w-full h-full ${composite?.layout?.tailwindClasses || ''}`} style={layoutStyle}>
 	{#if composite && 'component' in composite}
-		{#await loadComponentAndService(composite) then [Component, serviceProps]}
+		{#await loadComponentAndService(composite) then [Component]}
 			{#if Component}
 				<svelte:component
 					this={Component}
 					id={composite.id}
 					store={getCompositeStore(composite.id)}
-					services={serviceProps}
+					services={loadedServices}
 				/>
 			{:else if composite.component}
 				<p>Component {composite.component} not found.</p>
@@ -158,13 +169,13 @@
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
 			<div class="w-full h-full overflow-hidden" style={`grid-area: ${child.slot}`}>
-				{#await loadComponentAndService(child) then [ChildComponent, childServiceProps]}
+				{#await loadComponentAndService(child) then [ChildComponent]}
 					{#if ChildComponent}
 						<svelte:component
 							this={ChildComponent}
 							id={child.id}
 							store={getCompositeStore(child.id)}
-							services={childServiceProps}
+							services={loadedServices}
 						/>
 						{#if child.children && child.children.length}
 							<Composite composite={child} />