fix blank screen on load

frontend/src/main.test.ts

@@ -0,0 +1,22 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+describe("application entry point", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+    document.body.innerHTML = "";
+  });
+
+  it("mounts the Svelte application", async () => {
+    document.body.innerHTML = '<div id="app"></div>';
+    vi.stubGlobal(
+      "fetch",
+      vi.fn(() => new Promise(() => {})),
+    );
+
+    await import("./main");
+
+    expect(document.querySelector("header strong")?.textContent).toBe(
+      "Connecting",
+    );
+  });
+});

frontend/src/main.ts

@@ -1 +1,11 @@
-import './style.css';import App from './App.svelte';new App({target:document.getElementById('app')!});
+import "./style.css";
+import { mount } from "svelte";
+import App from "./App.svelte";
+
+const target = document.getElementById("app");
+
+if (!target) {
+  throw new Error("Missing #app mount target");
+}
+
+mount(App, { target });

frontend/vitest.config.ts

@@ -1,3 +1,7 @@
-import { defineConfig } from 'vitest/config';
-import { svelte } from '@sveltejs/vite-plugin-svelte';
-export default defineConfig({ plugins: [svelte()], test: { environment: 'jsdom' } });
+import { defineConfig } from "vitest/config";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+export default defineConfig({
+  plugins: [svelte()],
+  resolve: { conditions: ["browser"] },
+  test: { environment: "jsdom" },
+});