Makes finally dynamic component work??

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)) {
-		for (const [serverService, clientService] of zip(serverGroup.items, clientGroup.items)) {
-			const handler = getService(serverService.type || '');
+		const services = Object.entries(serverGroup.items).map(([k, v]) => k);
+
+		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 };
 };