start pulling apart concerns

src/routes/app/offline-first/+page.svelte

@@ -1,28 +1,32 @@
 <script lang="ts">
-	import { nanoid } from 'nanoid';
-	import { db } from './sync-db-store.js';
+	import { setupWs } from './sync-db-store.js';
 	import schemaContent from '$lib/sync/schema.sql?raw';
 	import Todos from './Todos.svelte';
+	import { Database } from './server-sync-db.js';
 
 	export let data;
+
+	const databasePromise = Database.load({
+		schema: { name: 'schema.sql', schemaContent },
+		name: data.dbName
+	});
+	const wsPromise = setupWs({ url: data.url, database: databasePromise });
 </script>
 
 <Todos
 	name="todos 1"
 	dbConfig={{
-		schema: { name: 'schema.sql', schemaContent },
-		name: data.dbName,
-		wsUrl: data.url,
+		databasePromise,
+		wsPromise,
 		serverSiteId: data.serverSiteId
 	}}
 />
 
 <Todos
 	name="todos 2"
 	dbConfig={{
-		schema: { name: 'schema.sql', schemaContent },
-		name: data.dbName,
-		wsUrl: data.url,
+		databasePromise,
+		wsPromise,
 		serverSiteId: data.serverSiteId
 	}}
-/>;
+/>

src/routes/app/offline-first/Todos.svelte

@@ -82,6 +82,7 @@
 		},
 		identifier: 'todos'
 	});
+
 	const todonts = store({
 		query: async (db) => await db.execO('SELECT * FROM todonts'),
 		commands: {
@@ -120,25 +121,6 @@
 	 *
 	 * NOTE: This might be a better basis for reacting to `merges` rather than these two separate systems but 🤷‍♂️
 	 */
-
-	/*
-    TODO
-    TODO
-    TODO
-    TODO
-    TODO
-    TODO
-    This isn't working because  `databasePromise` is created in `sync-db-store.ts`. There needs to be one app level instance
-    of `Database.load({schema, name})` (and we really should have only one instance of `setupWs`) that can be shared across all components.
-    These should probably be a top-level context. That way, registering `.onUpdate` will work for every change in every component.
-    (and of course we don't want multiple instances of the DB or websocket open)
-    TODO
-    TODO
-    TODO
-    TODO
-    TODO
-    TODO
-  */
 	database.then((db) => {
 		db.db.onUpdate(async (type, dbName, tblName, rowid) => {
 			if (tblName === 'todos') {

src/routes/app/offline-first/sync-db-store.ts

@@ -28,13 +28,11 @@ async function pushChangesSince({ database, ws, sinceVersion, serverSiteId }) {
 function wsMessageHandler({
 	database,
 	updates,
-	serverSiteId,
-	identifier
+	serverSiteId
 }: {
 	database: Database;
 	updates: Set<() => Promise<void>>;
 	serverSiteId: string;
-	identifier?: string;
 }) {
 	// TODO
 	// TODO
@@ -76,7 +74,7 @@ function wsMessageHandler({
 }
 
 // TODO: probably need re-connect/retry logic if WS server closes connection
-async function setupWs({ url, database }: { url: string; database: Promise<Database> }) {
+export async function setupWs({ url, database }: { url: string; database: Promise<Database> }) {
 	const db = await database;
 	const u = new URL(url);
 	const features = JSON.parse(u.searchParams.get('features') as string);
@@ -88,9 +86,7 @@ async function setupWs({ url, database }: { url: string; database: Promise<Datab
 	return ws;
 }
 
-export function db({ schema, name, wsUrl, serverSiteId, identifier }) {
-	const databasePromise = Database.load({ schema, name });
-	const wsPromise = setupWs({ url: wsUrl, database: databasePromise });
+export function db({ databasePromise, wsPromise, serverSiteId }) {
 	let listenerAdded = false;
 	const updates = new Set([]);
 
@@ -105,10 +101,7 @@ export function db({ schema, name, wsUrl, serverSiteId, identifier }) {
 			// every `store`
 			updates.add(update);
 			if (listenerAdded === false) {
-				ws.addEventListener(
-					'message',
-					wsMessageHandler({ database, identifier, serverSiteId, updates })
-				);
+				ws.addEventListener('message', wsMessageHandler({ database, serverSiteId, updates }));
 				listenerAdded = true;
 			}
 			await update();