From a3761140bdc41353a59ee4995a733d7e4fb47595 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Wed, 26 Jul 2023 16:36:08 +0200
Subject: [PATCH] feat(core): introduce reactive services loading mechanism

---
 .../components/HelloEarth/HelloEarth.svelte   | 14 +++-----------
 src/lib/core/Composite.svelte                 | 19 +++++++++++++++----
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/src/lib/components/HelloEarth/HelloEarth.svelte b/src/lib/components/HelloEarth/HelloEarth.svelte
index 405a21a..86c66a5 100644
--- a/src/lib/components/HelloEarth/HelloEarth.svelte
+++ b/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 () => {
-		// Check services loading
-		if (services.helloEarthAlert) {
-			// services.helloEarthAlert.alertMe();
-			isServicesLoaded = true;
-		} else {
-			console.error('helloEarthAlert not loaded');
-		}
-	});
+	$: if (services && services.helloEarthAlert) {
+		// services.helloEarthAlert.alertMe();
+	}
 
 	$: if ($store) isStoreLoaded = true;
 </script>
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index 592e996..872aef1 100644
--- a/src/lib/core/Composite.svelte
+++ b/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} />