Makes finally dynamic component work??

src/config.yml

@@ -2,11 +2,13 @@ title: 'Hello World !!'
 subtitle: 'actually, I am a new pilot.'
 
 services:
-  - title: '/Cloud'
+  cloud:
+    title: '/Cloud'
     subtitle: 'Private Cloud Utilities'
     icon: 'fas fa-cloud'
     items:
-      - title: 'NAS'
+      nas:
+        title: 'NAS'
         subtitle: 'Network Attached Storage'
         icon: 'fas fa-hard-drive'
         target: '_blank'

src/lib/config.test.ts

@@ -34,25 +34,25 @@ describe('Config', () => {
 		const custom: Config = {
 			title: 'custom',
 			secret: { secret: 'some secret' },
-			services: [
+			services: {
-				{
+				top: {
 					title: 'top services',
 					secret: 'secret',
-					items: [
+					items: {
-						{
+						top: {
 							title: 'top service',
 							url: 'somewhere',
 							secret: 'secret'
 						}
-					]
 					}
-			]
+				}
+			}
 		};
 
 		const stripped: Config = stripPrivateFields(custom);
 
 		expect(stripped.secret).toBeUndefined();
-		expect(stripped.services[0].secret).toBeUndefined();
+		expect(stripped.services.top.secret).toBeUndefined();
-		expect(stripped.services[0].items[0].secret).toBeUndefined();
+		expect(stripped.services.top.items.top.secret).toBeUndefined();
 	});
 });

src/lib/config.ts

@@ -21,13 +21,13 @@ export interface ServiceConfig extends SectionConfig {
 }
 
 export interface ServiceGroupConfig extends SectionConfig {
-	items: ServiceConfig[];
+	items: Record<string, ServiceConfig>;
 
 	[x: string]: unknown;
 }
 
 export interface Config extends SectionConfig {
-	services: ServiceGroupConfig[];
+	services: Record<string, ServiceGroupConfig>;
 
 	[x: string]: unknown;
 }
@@ -41,17 +41,17 @@ type DeepRequired<T> = T extends object
 const requiredConfig: DeepRequired<Config> = {
 	title: '',
 	subtitle: '',
-	services: [
+	services: {
-		{
+		default: {
 			title: '',
-			items: [
+			items: {
-				{
+				default: {
 					title: '',
 					url: ''
 				}
-			]
 			}
-	]
+		}
+	}
 };
 
 export function mergeConfig(a: Config, b: any): Config {
@@ -61,7 +61,7 @@ export function mergeConfig(a: Config, b: any): Config {
 export const defaultConfig: Config = {
 	title: 'Flanders',
 
-	services: []
+	services: {}
 };
 
 type SPOJO = Record<string, unknown>;
@@ -70,29 +70,21 @@ function strip<Type extends SPOJO>(toStrip: Type, reference: Type): Type {
 	const res: Type = { ...toStrip };
 	const referenceNames = Object.entries(reference).map(([key, value]) => key);
 
+	const allowAny: boolean = referenceNames.length == 1 && referenceNames[0] == 'default';
 	for (const [key, value] of Object.entries(res)) {
-		if (referenceNames.includes(key) == false) {
+		if (referenceNames.includes(key) == false && allowAny == false) {
 			// remove the object
 			delete res[key];
 			continue;
 		}
-
-		// strips further arrays
-		if (value instanceof Array) {
-			const stripped: SPOJO = {};
-			const childRef = (reference[key] as Array<SPOJO>)[0];
-			stripped[key] = value.map((v: SPOJO) => strip(v, childRef));
-			Object.assign(res, stripped);
-			continue;
-		}
-
 		if (typeof value != 'object') {
 			continue;
 		}
 
 		// it is a child object, we strip it further
 		const stripped: SPOJO = {};
-		stripped[key] = strip(value as SPOJO, reference[key] as SPOJO);
+		const childReference: SPOJO = reference[allowAny ? 'default' : key] as SPOJO;
+		stripped[key] = strip(value as SPOJO, childReference);
 		Object.assign(res, stripped);
 	}
 	return res;

src/lib/services/service.ts

@@ -10,18 +10,21 @@ export type ServiceHandler = (input: Partial<ServiceHandlerArgs>) => {
 	componentPath: string;
 };
 
-const services: Record<string, ServiceHandler> = {};
+const services: Record<string, [ServiceHandler, string]> = {};
 
 export function registerService(type: string, handler: ServiceHandler) {
-	services[type] = handler;
+	services[type] = [handler, type];
 }
 
-export function getService(type: string): ServiceHandler {
+export function getService(type: string): [ServiceHandler, string] {
 	const handler = services[type];
 	if (handler == undefined) {
-		return () => {
+		return [
+			() => {
 				return { data: {}, componentPath: 'generic/GenericServiceCard.svelte' };
-		};
+			},
+			'generic'
+		];
 	}
 	return handler;
 }

src/routes/+page.server.ts

@@ -1,5 +1,5 @@
 import { dev } from '$app/environment';
-import { config, stripPrivateFields, type Config } from '$lib/config';
+import { config, stripPrivateFields, type Config, type ServiceConfig } from '$lib/config';
 import type { PageServerLoad } from './$types';
 import * as yml from 'js-yaml';
 import { readFile } from 'fs/promises';
@@ -17,23 +17,27 @@ async function reloadConfig(): Promise<Config> {
 	}
 }
 
-function zip<T>(a: Array<T>, b: Array<T>): Array<Array<T>> {
-	const size = Math.min(a.length, b.length);
-	return a.slice(0, size).map((v, i) => [v, b[i]]);
-}
-
 export const load: PageServerLoad = async ({ fetch, depends }) => {
 	depends('app:state');
 
 	const serverConfig = await reloadConfig();
 	const clientConfig = stripPrivateFields(serverConfig);
+	const groups: Array<string> = Object.entries(serverConfig.services).map(([k, v]) => k);
+	for (const group of groups) {
+		const serverGroup = serverConfig.services[group];
+		const clientGroup = clientConfig.services[group];
 
-	for (const [serverGroup, clientGroup] of zip(serverConfig.services, clientConfig.services)) {
+		const services = Object.entries(serverGroup.items).map(([k, v]) => k);
-		for (const [serverService, clientService] of zip(serverGroup.items, clientGroup.items)) {
+
-			const handler = getService(serverService.type || '');
+		for (const service of services) {
+			const serverService = serverGroup.items[service] as ServiceConfig;
+			const clientService = clientGroup.items[service] as ServiceConfig;
+
+			const [handler, type] = getService(serverService.type || '');
+			clientService.type = type;
 			Object.assign(clientService, handler({ fetch, config: serverService }));
 		}
 	}
 	clientConfig.timestamp = new Date();
-	return { config: clientConfig };
+	return { config: clientConfig, cool: true };
 };

src/routes/+page.ts

@@ -1,15 +1,31 @@
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ data }) => {
-	for (const group of data.config.services) {
+	const config = { ...data.config };
-		for (const service of group.items) {
+	const groups: Array<string> = Object.entries(config.services).map(([k, v]) => k);
+
+	const components: Record<string, any> = {};
+
+	for (const group of groups) {
+		const services: Array<string> = Object.entries(config.services[group].items).map(
+			([k, v]) => k
+		);
+		for (const s of services) {
+			const service = data.config.services[group].items[s];
+
+			if (components[service.type || 'generic'] != undefined) {
+				continue;
+			}
+
 			const path =
 				'../lib/services/' + (service.componentPath || 'generic/GenericServiceCard.svelte');
 			const module = await import(/* @vite-ignore */ path);
 
-			service.component = module.default;
+			components[service.type || 'generic'] = module.default;
+
 			delete service.componentPath;
 		}
 	}
-	return { config: data.config };
+
+	return { config, components };
 };