Fixes production build with custom services

src/hooks.client.ts

@@ -1,3 +1,3 @@
-import { initServices } from '$lib/services/services';
+import { initComponents } from '$lib/services/services';
 
-await initServices();
+await initComponents();

src/hooks.server.ts

@@ -1,9 +1,10 @@
 import { dev } from '$app/environment';
 import { watchDymamicConfig } from '$lib/server/config';
-import { initServices } from '$lib/services/services';
+import { initComponents, initServices } from '$lib/services/services';
 
 if (!dev) {
 	watchDymamicConfig();
 }
 
 await initServices();
+await initComponents();

src/lib/components/Brand.svelte

@@ -7,12 +7,23 @@
 	function masked() {
 		return brand.logo != undefined && brand.asmask == true;
 	}
+
+	function logoURL(): string {
+		console.log(brand.logo);
+		if (brand.logo == undefined) {
+			return '';
+		}
+		if (brand.logo.startsWith('https://') || brand.logo.startsWith('http://')) {
+			return brand.logo;
+		}
+		return '/' + brand.logo;
+	}
 </script>
 
-<div style="--mask: url(/{brand.logo || ''}); --mask-color: {color}" class:masked={masked()}>
+<div style="--mask: url({logoURL()}); --mask-color: {color}" class:masked={masked()}>
 	{#if brand.logo}
 		{#if brand.asmask != true}
-			<img src={'/' + brand.logo} alt="logo" />
+			<img src={logoURL()} alt="logo" />
 		{/if}
 	{:else if brand.icon}
 		<i class={brand.icon} />

src/lib/services/pihole/+content.svelte

@@ -2,4 +2,4 @@
 	export let data;
 </script>
 
-pihole status
+pihole status {data}

src/lib/services/pihole/+service.ts

@@ -1,9 +1,7 @@
-import { type ServiceComponentPath, type ServiceHandler } from '../service';
+import { type ServiceHandler } from '../service';
 
 export const handle: ServiceHandler = () => {
 	const res = { logo: 'https://cdn.rawgit.com/pi-hole/graphics/master/Vortex/Vortex.svg' };
 
 	return res;
 };
-
-export const path: ServiceComponentPath = 'pihole/PiHoleContent.svelte';

src/lib/services/prowlarr/+content.svelte

@@ -2,4 +2,4 @@
 	export let data;
 </script>
 
-Prowlarr content
+Prowlarr content {data}

src/lib/services/prowlarr/+service.ts

@@ -1,7 +1,5 @@
-import type { ServiceComponentPath, ServiceHandler } from '../service';
+import type { ServiceHandler } from '../service';
 
 export const handle: ServiceHandler = () => {
 	return { prowlardata: 'coucou' };
 };
-
-export const path: ServiceComponentPath = 'prowlarr/ProwlarrContent.svelte';

src/lib/services/service.ts

@@ -6,5 +6,3 @@ interface ServiceHandlerArgs {
 }
 
 export type ServiceHandler = (input: ServiceHandlerArgs) => Record<string, unknown>;
-
-export type ServiceComponentPath = string;

src/lib/services/services.ts

@@ -1,22 +1,23 @@
 import type { ServiceHandler } from './service';
 
-type ServiceRecord = {
-	handler: ServiceHandler;
-	component: any;
-};
+const services: Record<string, ServiceHandler> = {};
 
-const services: Record<string, ServiceRecord> = {};
+const components: Record<string, any> = {};
 
-function registerService(type: string, handler: ServiceHandler, component: any) {
-	services[type] = { handler, component };
+function registerService(type: string, handler: ServiceHandler) {
+	services[type] = handler;
+}
+
+function registerComponent(type: string, component: any) {
+	components[type] = component;
 }
 
 export function getServiceHandler(type: string): ServiceHandler | undefined {
-	return services[type]?.handler;
+	return services[type];
 }
 
 export function getServiceComponent(type: string): any {
-	return services[type]?.component;
+	return components[type];
 }
 
 export async function initServices() {
@@ -24,20 +25,32 @@ export async function initServices() {
 
 	for (const [modulePath, load] of Object.entries(services)) {
 		try {
-			const { handle, path } = (await load()) as any;
+			const { handle } = (await load()) as any;
 			if (handle == undefined) {
 				throw new Error(`${modulePath} does not export 'handle'`);
 			}
-			if (path == undefined) {
-				throw new Error(`${modulePath} does not export 'path'`);
-			}
-
-			const module = await import(/* @vite-ignore */ '/src/lib/services/' + path);
-
 			const typeName = modulePath.slice(18, -12);
-			registerService(typeName, handle, module.default);
+			registerService(typeName, handle);
 		} catch (err) {
 			console.error(`Could not load service definition from '${modulePath}': ${err}`);
 		}
 	}
 }
+
+export async function initComponents() {
+	const services = import.meta.glob('/src/lib/services/**/+content.svelte');
+
+	for (const [componentPath, load] of Object.entries(services)) {
+		try {
+			const module = (await load()) as any;
+
+			if (module == undefined) {
+				throw new Error(`${componentPath} does not load`);
+			}
+			const typeName = componentPath.slice(18, -16);
+			registerComponent(typeName, module.default);
+		} catch (err) {
+			console.error(`Could not load component definition from '${componentPath}': ${err}`);
+		}
+	}
+}