fix client db ts types

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

@@ -11,39 +11,19 @@ import { browser } from "$app/environment";
  */
 export type ClientDb = ReturnType<typeof drizzle>;
 
-type ClientDbHolder = {
-	db: ClientDb;
-	overwriteDatabaseFile: (
-		input: ReadableStream<Uint8Array> | Blob | Uint8Array,
-	) => Promise<void>;
-};
+// this is kinda mid
+export const sqlocal = browser ? await initDb() : null;
+export const db = sqlocal ? drizzle(sqlocal.driver, sqlocal.batchDriver) : null;
 
-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.
+async function initDb() {
 	const { SQLocalDrizzle } = await import("sqlocal/drizzle");
-
-	const { driver, batchDriver, overwriteDatabaseFile } = new SQLocalDrizzle(
-		"database.sqlite3",
-	);
-
-	holder = {
-		db: drizzle(driver, batchDriver),
-		overwriteDatabaseFile,
-	};
-
-	return holder;
+	return new SQLocalDrizzle("database.sqlite3");
+}
+
+export function getClientDb() {
+	if (!sqlocal || !db) throw "Client DB can only be accessed from the browser";
+	return {
+		db,
+		overwriteDatabaseFile: sqlocal.overwriteDatabaseFile,
+	};
 }

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

@@ -64,7 +64,7 @@ export async function ensureSeeded(
 		}
 
 		// Prefer streaming when possible.
-		const { overwriteDatabaseFile } = await getClientDb();
+		const { overwriteDatabaseFile } = getClientDb();
 
 		if (res.body) {
 			await overwriteDatabaseFile(res.body);

src/routes/+page.svelte

@@ -34,7 +34,7 @@
 		try {
 			isSearching = true;
 
-			const { db } = await getClientDb();
+			const { db } = getClientDb();
 
 			if (!q) {
 				anime = await getAnimeList(db, 20);

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

@@ -54,7 +54,7 @@
 		}
 
 		try {
-			const { db } = await getClientDb();
+			const { db } = getClientDb();
 			await ensureSeeded();
 			const res = await getAnimeWithSongsByAnnId(db, annId);