cigaleapp · gwennlbh · Sep 21, 2025
diff --git a/bun.lock b/bun.lock
diff --git a/bunfig.toml b/bunfig.toml
@@ -1,2 +1,6 @@
+[serve.static]
+plugins = ["bun-plugin-svelte"]
+# plugins = ["./src/dashboard/svelte.ts"]
+
 [test]
 coverageThreshold = 0.90
diff --git a/package.json b/package.json
@@ -44,6 +44,8 @@
 	},
 	"devDependencies": {
 		"@types/bun": "^1.2.22",
+		"bun-plugin-svelte": "^0.0.6",
+		"dotenv": "^17.2.2",
 		"drizzle-arktype": "^0.1.3",
 		"drizzle-kit": "^0.31.4",
 		"drizzle-orm": "^0.44.5",

diff --git a/src/cors.ts b/src/cors.ts
@@ -17,4 +17,10 @@ export class CorsedResponse extends Response {
 			response.headers.set('Access-Control-Allow-Origin', Bun.env.ALLOWED_ORIGINS || '*');
 		return response;
 	}
+
+	static html(body: string, init?: ResponseInit) {
+		const response = new CorsedResponse(body, init);
+		response.headers.set('Content-Type', 'text/html; charset=utf-8');
+		return response;
+	}
 }
diff --git a/src/dashboard/app.html b/src/dashboard/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Dashboard</title>
+		<script type="module" src="./frontend.ts"></script>
+	</head>
+	<body>
+		<div id="root"></div>
+	</body>
+</html>
diff --git a/src/dashboard/backend.ts b/src/dashboard/backend.ts
@@ -0,0 +1,6 @@
+import { BunPlugin } from 'bun';
+
+export const backend: BunPlugin = {
+	name: 'Dashboard backend',
+	setup({}) {}
+};
diff --git a/src/dashboard/frontend.ts b/src/dashboard/frontend.ts
@@ -0,0 +1,28 @@
+import { mount, unmount } from 'svelte';
+import App from './home.svelte';
+
+declare global {
+	var didMount: boolean | undefined;
+}
+
+let app: Record<string, any> | undefined;
+
+// mount the application entrypoint to the DOM on first load. On subsequent hot
+// updates, the app will be unmounted and re-mounted via the accept handler.
+
+const root = document.getElementById('root')!;
+if (!globalThis.didMount) {
+	app = mount(App, { target: root });
+}
+globalThis.didMount = true;
+
+if (import.meta.hot) {
+	import.meta.hot.accept(async () => {
+		// avoid unmounting twice when another update gets accepted while outros are playing
+		if (!app) return;
+		const prevApp = app;
+		app = undefined;
+		await unmount(prevApp, { outro: true });
+		app = mount(App, { target: root });
+	});
+}
diff --git a/src/dashboard/home.svelte b/src/dashboard/home.svelte
@@ -0,0 +1,13 @@
+<script>
+    const { hello } = $props()
+    let count = $state(0)
+</script>
+
+<h1>hellowo {hello}</h1>
+<button onclick={() => {count++}}>{count}</button>
+
+<style>
+    button {
+        color: red;
+    }
+</style>
diff --git a/src/dashboard/svelte.ts b/src/dashboard/svelte.ts
@@ -0,0 +1,33 @@
+import { plugin } from 'bun';
+
+import * as svelte from 'svelte/compiler';
+
+plugin({
+	name: 'Svelte',
+	setup(build) {
+		build.onLoad({ filter: /\.svelte(\?.*)?$/ }, async (args) => {
+			const searchParams = new URLSearchParams(args.path.split('?')[1]);
+			const dom = searchParams.has('dom');
+			const path = args.path.replace(/\?.*$/, '');
+
+			const file = await Bun.file(path).text();
+			const { js, warnings } = svelte.compile(file, {
+				filename: path,
+				generate: dom ? 'client' : 'server',
+				css: 'injected',
+				hmr: !process.env.PROD
+			});
+
+			for (const warning of warnings) {
+				console.warn(`[svelte] ${warning.message}`);
+			}
+
+			return dom
+				? {
+						loader: 'object',
+						exports: { default: js.code }
+					}
+				: { contents: js.code, loader: 'js' };
+		});
+	}
+});
diff --git a/src/index.ts b/src/index.ts
@@ -16,13 +16,17 @@ import {
 	SendCorrectionsRequest
 } from './tables.js';
 import { omit, uniqueBy } from './utils.js';
+import dashboard from './dashboard/app.html';
+import DashboardHome from './dashboard/home.svelte';
+import { render } from 'svelte/server';
 
 const port = process.argv[2] ? parseInt(process.argv[2]) : 3000;
 
 Bun.serve({
 	port,
 	development: !Bun.env.PROD,
 	routes: {
+		'/dashboard': dashboard,
 		'/corrections': {
 			async POST(req: Request) {
 				const body = await req.json().then(SendCorrectionsRequest.assert);