Updated componentLoader and vite to load any folder depth

src/lib/componentLoader.ts

@@ -0,0 +1,10 @@
+import componentNames from 'virtual:components-list';
+
+const components = {};
+
+componentNames.forEach(path => {
+    const name = path.split('/').pop();  // Extract just the file name from the path
+    components[name] = () => import( /* @vite-ignore */ `/src/lib/components/${path}.svelte`);
+});
+
+export default components;

src/lib/components.ts

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

src/lib/components/AuthSig.svelte

@@ -2,7 +2,6 @@
 	import { onMount } from 'svelte';
 	import { checkAndSignAuthMessage } from '@lit-protocol/lit-node-client';
 	import { LOCAL_STORAGE_KEYS } from '@lit-protocol/constants';
-	import Send from '$lib/Send.svelte';
 
 	let authSig = null;
 	let error = null;

src/lib/components/Composite.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import Composite from './Composite.svelte'; // Recursive import
-	import components from '$lib/components.ts';
+	import components from '$lib/componentLoader';
 	import { getContextStore } from '$lib/stores/contextStore.ts';
 
 	export let componentsData = {

vite.config.ts

@@ -3,6 +3,22 @@ import { defineConfig } from 'vite';
 import * as fs from 'fs';
 import { resolve } from 'path';
 
+// Utility function to get all .svelte files from a directory recursively
+function getRecursiveSvelteFiles(dir) {
+	const dirents = fs.readdirSync(dir, { withFileTypes: true });
+	const files = Array.from(dirents).flatMap((dirent) => {
+		const res = resolve(dir, dirent.name);
+		if (dirent.isDirectory()) {
+			return getRecursiveSvelteFiles(res);
+		} else if (res.endsWith('.svelte')) {
+			return [res];
+		} else {
+			return [];
+		}
+	});
+	return files;
+}
+
 export default defineConfig({
 	plugins: [
 		sveltekit(),
@@ -15,9 +31,15 @@ export default defineConfig({
 			load(id) {
 				if (id === 'virtual:components-list') {
 					const componentsDir = resolve(__dirname, 'src/lib/components');
-					const components = fs.readdirSync(componentsDir)
+					const componentsFiles = getRecursiveSvelteFiles(componentsDir);
-						.filter(f => f.endsWith('.svelte'))
+
-						.map(f => f.replace('.svelte', ''));
+					const components = componentsFiles.map(file =>
+						file
+							.replace(componentsDir, '')
+							.replace(/\.svelte$/, '')
+							.replace(/\\/g, '/') // Fix Windows path separators
+							.slice(1) // Remove leading "/"
+					);
 
 					return `export default ${JSON.stringify(components)};`;
 				}