added dynamical import of components via vite

src/lib/components.ts

@@ -1,8 +1,9 @@
-import LitStatus from '$lib/LitStatus.svelte';
-import Composite from '$lib/components/Composite.svelte';
+import componentNames from 'virtual:components-list';
 
-const components = {
-    "LitStatus": LitStatus,
-};
+const components = {};
 
-export default components;
+componentNames.forEach(name => {
+    components[name] = () => import(`$lib/components/${name}.svelte`);
+});
+
+export default components;

src/lib/components/Composite.svelte

@@ -4,9 +4,8 @@
 	export let name = '';
 
 	async function getComponent(componentName) {
-		if (components[componentName]) return components[componentName];
-		if (componentName === 'Composite') {
-			const module = await import('$lib/components/Composite.svelte');
+		if (components[componentName]) {
+			const module = await components[componentName]();
 			return module.default;
 		}
 		return null;
@@ -26,5 +25,3 @@
 		{/if}
 	{/await}
 {/each}
-
-<p>Composite: {name}</p>

src/lib/components/LitStatus.svelte

@@ -2,7 +2,7 @@
 
 <script>
 	import { onMount } from 'svelte';
-	import Lit from '../lib/lit';
+	import Lit from '../lit';
 
 	let networkStatus = 'Disconnected';
 	let isNetworkLoading = true;

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script>
-	import LitStatus from '$lib/LitStatus.svelte';
+	import LitStatus from '$lib/components/LitStatus.svelte';
 	import AuthSign from '$lib/AuthSig.svelte';
 	import Wallet from '$lib/Wallet.svelte';
 	import Send from '$lib/Send.svelte';
@@ -14,12 +14,17 @@
 		{
 			id: 2,
 			componentName: 'Composite',
-			name: 'Nested Composite 1',
+			name: 'Nested Composite',
 			components: [
 				{
 					id: 3,
 					componentName: 'LitStatus',
-					name: 'Leaf 2'
+					name: 'LitStatus'
+				},
+				{
+					id: 4,
+					componentName: 'MessageInput',
+					name: 'MessageInput'
 				}
 			]
 		}