From e4cb7df353d909c0469c6f545d5b998de1ea0e2c Mon Sep 17 00:00:00 2001
From: Samuel Andert <samuel@ora.earth>
Date: Wed, 2 Aug 2023 12:37:45 +0200
Subject: [PATCH] Updated Composite to render a FallBack Component, when no
 visual component has been rendered.

---
 src/lib/components/Recipies/oRecipe.svelte |  2 +-
 src/lib/core/Composite.svelte              | 45 +++++++++-------------
 src/lib/core/FallBack.svelte               |  4 ++
 3 files changed, 24 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/core/FallBack.svelte

diff --git a/src/lib/components/Recipies/oRecipe.svelte b/src/lib/components/Recipies/oRecipe.svelte
index 8fd00dc..4c2c0f1 100644
--- a/src/lib/components/Recipies/oRecipe.svelte
+++ b/src/lib/components/Recipies/oRecipe.svelte
@@ -16,7 +16,7 @@
 		children: [
 			{
 				id: 'child',
-				component: 'LearnReady',
+				// component: 'LearnReady',
 				slot: 'left',
 				store: {
 					xstate: 'NOTREADY'
diff --git a/src/lib/core/Composite.svelte b/src/lib/core/Composite.svelte
index 3bb948b..f92732b 100644
--- a/src/lib/core/Composite.svelte
+++ b/src/lib/core/Composite.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import Composite from './Composite.svelte';
+	import FallBack from './FallBack.svelte';
 	import components from '$lib/core/componentLoader';
 	import services from '$lib/core/servicesLoader';
 	import { dataStore } from '$lib/core/dataLoader';
@@ -19,7 +20,7 @@
 		layout?: ICompositeLayout;
 		id: string;
 		slot?: string;
-		component: string;
+		component?: string;
 		services?: string[];
 		map?: Record<string, string>;
 		store?: Record<string, any>;
@@ -157,7 +158,7 @@
 			const module = await components[componentName]();
 			return module.default;
 		}
-		return null;
+		return FallBack;
 	}
 
 	async function loadService(serviceName: string) {
@@ -169,7 +170,8 @@
 	}
 
 	async function loadComponentAndService(component: IComposite) {
-		return await getComponent(component.component);
+		const componentName = component.component || 'FallBack';
+		return await getComponent(componentName);
 	}
 </script>
 
@@ -179,17 +181,14 @@
 >
 	{#if composite?.servicesLoaded}
 		{#await loadComponentAndService(composite) then Component}
-			{#if Component}
-				<svelte:component
-					this={Component}
-					id={composite.id}
-					store={getCompositeStore(composite.id)}
-					services={loadedServices}
-				/>
-			{/if}
+			<svelte:component
+				this={Component}
+				id={composite.id}
+				store={getCompositeStore(composite.id)}
+				services={loadedServices}
+			/>
 		{/await}
 	{/if}
-
 	{#if composite?.children}
 		{#each composite.children as child (child.id)}
 			<div
@@ -198,22 +197,16 @@
 			>
 				{#if child.servicesLoaded}
 					{#await loadComponentAndService(child) then ChildComponent}
-						{#if ChildComponent}
-							<svelte:component
-								this={ChildComponent}
-								id={child.id}
-								store={getCompositeStore(child.id)}
-								services={loadedServices}
-							/>
-							{#if child.children && child.children.length}
-								<Composite composite={child} />
-							{/if}
-						{:else}
-							<p>Component {child.component} not found.</p>
+						<svelte:component
+							this={ChildComponent}
+							id={child.id}
+							store={getCompositeStore(child.id)}
+							services={loadedServices}
+						/>
+						{#if child.children && child.children.length}
+							<Composite composite={child} />
 						{/if}
 					{/await}
-				{:else}
-					<p>Loading services for child {child.id}...</p>
 				{/if}
 			</div>
 		{/each}
diff --git a/src/lib/core/FallBack.svelte b/src/lib/core/FallBack.svelte
new file mode 100644
index 0000000..c4fb85e
--- /dev/null
+++ b/src/lib/core/FallBack.svelte
@@ -0,0 +1,4 @@
+<script>
+	export let id;
+	console.log(`FallBack component rendered with id ${id}`);
+</script>
\ No newline at end of file