From e3f2dbacc84b6018ec5b3e36e93b3690f59610b2 Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Wed, 26 Jul 2023 09:40:28 +0200
Subject: [PATCH] feat(Composite): Enhance root and child rendering with error
 differentiation

- Adjusted Composite to conditionally check for both direct root and child rendering.
- Differentiated error states: omitting an error when `component` prop is absent but showing an error when it's undefined.
- Fixed rendering of @app in the messages stream.
---
 src/lib/components/Messages.svelte    |  2 +-
 src/lib/components/SendMessage.svelte |  7 ++----
 src/lib/core/Composite.svelte         | 31 +++++++++++++++++++++------
 src/routes/+page.svelte               |  2 +-
 4 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/Messages.svelte b/src/lib/components/Messages.svelte
index fc916c5..4beb168 100644
--- a/src/lib/components/Messages.svelte
+++ b/src/lib/components/Messages.svelte
@@ -40,7 +40,7 @@
 		<!-- Render Composite Component -->
 		{#if message.composite}
 			<div class="overflow-y-auto max-h-80vh">
-				<Composite componentsData={message.composite} />
+				<Composite composite={message.composite} />
 			</div>
 		{/if}
 	{/each}
diff --git a/src/lib/components/SendMessage.svelte b/src/lib/components/SendMessage.svelte
index 4f2dd11..da307f4 100644
--- a/src/lib/components/SendMessage.svelte
+++ b/src/lib/components/SendMessage.svelte
@@ -13,11 +13,8 @@
 			const match = text.match(appCommandPattern);
 			if (match && match[1]) {
 				message.composite = {
-					children: [
-						{
-							component: match[1] // Matched component name
-						}
-					]
+					id: match[1],
+					component: match[1]
 				};
 			}
 			console.log(message);
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index 68ec8d5..bcc4ebb 100644
--- a/src/lib/core/Composite.svelte
+++ b/src/lib/core/Composite.svelte
@@ -112,6 +112,10 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 		}
 		return loadedServices;
 	}
+	// Additional utility function to get component and service props
+	async function loadComponentAndService(component: IComposite) {
+		return await Promise.all([getComponent(component.component), getServiceProps(component)]);
+	}
 </script>
 
 <div
@@ -120,21 +124,36 @@ ${composite.layout.rows ? `grid-template-rows: ${composite.layout.rows};` : ''}
 		: 'grid w-full h-full'}
 	style={layoutStyle}
 >
-	{#if composite && composite.children}
+	{#if composite && 'component' in composite}
+		{#await loadComponentAndService(composite) then [Component, serviceProps]}
+			{#if Component}
+				<svelte:component
+					this={Component}
+					id={composite.id}
+					{...composite.store}
+					services={serviceProps}
+				/>
+			{:else if composite.component}
+				<p>Component {composite.component} not found.</p>
+			{/if}
+		{/await}
+	{/if}
+
+	{#if composite?.children}
 		{#each composite.children as child (child.id)}
 			<div class={`w-full h-full overflow-hidden`} style={`grid-area: ${child.slot}`}>
-				{#await Promise.all( [getComponent(child.component), getServiceProps(child)] ) then [Component, serviceProps]}
-					{#if Component}
+				{#await loadComponentAndService(child) then [ChildComponent, childServiceProps]}
+					{#if ChildComponent}
 						<svelte:component
-							this={Component}
+							this={ChildComponent}
 							id={child.id}
 							{...child.store}
-							services={serviceProps}
+							services={childServiceProps}
 						/>
 						{#if child.children && child.children.length}
 							<Composite composite={child} />
 						{/if}
-					{:else}
+					{:else if child.component}
 						<p>Component {child.component} not found.</p>
 					{/if}
 				{/await}
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 898ffb1..545c28e 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -6,7 +6,7 @@
 	let composite = {
 		id: 'composite',
 		layout: {
-			areas: `   
+			areas: `
 				"top top top"
 				"main main main"
 				"footer footer footer";