succuess pt. 10 fix ssr on preview and prod builds

src/lib/db/client-db/index.ts

@@ -2,19 +2,48 @@ export * from "./queries";
 export * from "./seed";
 
 import { drizzle } from "drizzle-orm/sqlite-proxy";
-import { SQLocalDrizzle } from "sqlocal/drizzle";
+import { browser } from "$app/environment";
-
-const { driver, batchDriver, overwriteDatabaseFile } = new SQLocalDrizzle(
-	"database.sqlite3",
-);
-
-export const db = drizzle(driver, batchDriver);
 
 /**
  * Concrete client DB type (SQLocal-backed Drizzle via sqlite-proxy).
  * Exported to allow query helpers to accept the specific type without
  * creating circular type references.
  */
-export type ClientDb = typeof db;
+export type ClientDb = ReturnType<typeof drizzle>;
 
-export { overwriteDatabaseFile };
+type ClientDbHolder = {
+	db: ClientDb;
+	overwriteDatabaseFile: (
+		input: ReadableStream<Uint8Array> | Blob | Uint8Array,
+	) => Promise<void>;
+};
+
+let holder: ClientDbHolder | null = null;
+
+/**
+ * Lazily create the SQLocal-backed Drizzle DB.
+ * Must only be called in the browser (Workers SSR does not provide `BroadcastChannel`).
+ */
+export async function getClientDb(): Promise<ClientDbHolder> {
+	if (!browser) {
+		throw new Error(
+			"Client DB is only available in the browser (SSR is not supported).",
+		);
+	}
+
+	if (holder) return holder;
+
+	// Dynamic import keeps SQLocal (and its browser-only APIs) out of SSR evaluation.
+	const { SQLocalDrizzle } = await import("sqlocal/drizzle");
+
+	const { driver, batchDriver, overwriteDatabaseFile } = new SQLocalDrizzle(
+		"database.sqlite3",
+	);
+
+	holder = {
+		db: drizzle(driver, batchDriver),
+		overwriteDatabaseFile,
+	};
+
+	return holder;
+}

src/lib/db/client-db/seed.ts

@@ -1,6 +1,6 @@
 import { browser } from "$app/environment";
 import { asset } from "$app/paths";
-import { overwriteDatabaseFile } from "$lib/db/client-db";
+import { getClientDb } from "$lib/db/client-db";
 
 /**
  * Version-keyed seeding for the client-side SQLocal database.
@@ -64,6 +64,8 @@ export async function ensureSeeded(
 		}
 
 		// Prefer streaming when possible.
+		const { overwriteDatabaseFile } = await getClientDb();
+
 		if (res.body) {
 			await overwriteDatabaseFile(res.body);
 		} else {

src/routes/+page.svelte

@@ -3,9 +3,9 @@
 	import { useSearchParams } from "runed/kit";
 	import { onMount } from "svelte";
 	import {
-		db,
 		ensureSeeded,
 		getAnimeList,
+		getClientDb,
 		searchAnimeByName,
 	} from "$lib/db/client-db";
 	import { AmqBrowseSearchSchema } from "$lib/types/search/amq-browse";
@@ -34,6 +34,8 @@
 		try {
 			isSearching = true;
 
+			const { db } = await getClientDb();
+
 			if (!q) {
 				anime = await getAnimeList(db, 20);
 			} else {

src/routes/anime/[annId]/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
-	import { db, ensureSeeded } from "$lib/db/client-db";
+	import { ensureSeeded, getClientDb } from "$lib/db/client-db";
 	import { getAnimeWithSongsByAnnId } from "$lib/db/client-db/queries";
 	import { seasonName } from "$lib/utils/amq";
 
@@ -54,6 +54,7 @@
 		}
 
 		try {
+			const { db } = await getClientDb();
 			await ensureSeeded();
 			const res = await getAnimeWithSongsByAnnId(db, annId);