Use tinybase for data sync (#18)

This removes the custom sync protocol in favor of tinybase, which has a more robust CRDT based protocol.

Author: jakst

packages/app/package.json

@@ -33,9 +33,11 @@
 		"@thisbeyond/solid-dnd": "0.7.5",
 		"lib": "workspace:*",
 		"motion": "11.15.0",
+		"reconnecting-websocket": "^4.4.0",
 		"solid-js": "1.9.3",
 		"solid-motionone": "1.0.2",
 		"solid-transition-group": "0.2.3",
+		"tinybase": "^5.4.4",
 		"vinxi": "0.5.1",
 		"workbox-window": "7.3.0",
 		"zod": "3.24.1"

packages/app/src/components/ConnectionWarning.tsx

@@ -1,12 +1,11 @@
 import { useConnectivitySignal } from "@solid-primitives/connectivity"
 import { Match, Switch } from "solid-js"
 
-export function ConnectionWarning(props: { isAuthenticated: boolean; isConnected: boolean }) {
+export function ConnectionWarning(props: { isConnected: boolean }) {
 	const isOnline = useConnectivitySignal()
 
 	const showOfflineWarning = () => !isOnline()
 	const showNotConnectedWarning = () => isOnline() && !props.isConnected
-	const showAuthWarning = () => isOnline() && props.isConnected && !props.isAuthenticated
 
 	return (
 		<Switch>
@@ -27,18 +26,6 @@ export function ConnectionWarning(props: { isAuthenticated: boolean; isConnected
 					<span class="block">Your changes will be synced when the server is back up again.</span>
 				</div>
 			</Match>
-
-			<Match when={showAuthWarning()}>
-				<div
-					class="mx-2 mb-4 bg-amber2 border border-amber7 text-sm text-amber11 px-4 py-3 rounded relative"
-					role="alert"
-				>
-					<strong class="font-bold">Whoppa!</strong>
-					<span class="block">
-						Looks like the server has lost its authentication info. Contact your system admin to re-authenticate.
-					</span>
-				</div>
-			</Match>
 		</Switch>
 	)
 }

packages/app/src/components/Home.tsx

@@ -1,4 +1,3 @@
-import { useConnectivitySignal } from "@solid-primitives/connectivity"
 import {
 	DragDropProvider,
 	DragDropSensors,
@@ -7,87 +6,28 @@ import {
 	SortableProvider,
 	closestCenter,
 } from "@thisbeyond/solid-dnd"
-import { Client, EventQueue, ShoppingList, type ShoppingListEvent, type ShoppingListItem, trimAndUppercase } from "lib"
+import { type ShoppingListItem, trimAndUppercase } from "lib"
 import { animate } from "motion/mini"
-import { For, type JSX, Show, createEffect, createSignal, onCleanup, onMount } from "solid-js"
-import { createStore, reconcile } from "solid-js/store"
+import { For, type JSX, Show, createSignal, onCleanup, onMount } from "solid-js"
 import { Motion, Presence } from "solid-motionone"
 import { TransitionGroup } from "solid-transition-group"
-import { ConnectionWarning } from "~/components/ConnectionWarning"
 import { ItemRow } from "~/components/ItemRow"
-import { BrowserServerConnection } from "~/lib/browser-server-connection"
+import { isConnected, myShoppingList, shopping } from "~/lib/shopping-list"
 import { isInputField } from "~/lib/type-guards"
 import IconCaretRight from "~icons/radix-icons/caret-right"
-
-function createClient() {
-	const [connectionStatus, setConnectionStatus] = createSignal({ authenticated: true, connected: true })
-
-	const serverConnection = new BrowserServerConnection((value) => setConnectionStatus(value))
-
-	const initialShoppingListString = localStorage.getItem("main-shopping-list")
-	const initialShoppingList = initialShoppingListString
-		? (JSON.parse(initialShoppingListString) as ShoppingListItem[])
-		: []
-
-	const [list, setStore] = createStore({ items: initialShoppingList })
-
-	const shoppingList = new ShoppingList(structuredClone(initialShoppingList), (newList) => {
-		setStore("items", reconcile(structuredClone(newList)))
-		localStorage.setItem("main-shopping-list", JSON.stringify(newList))
-	})
-
-	const storedRemoteShoppingListCopyString = localStorage.getItem("remote-shopping-list")
-	const storedRemoteShoppingListCopy = storedRemoteShoppingListCopyString
-		? (JSON.parse(storedRemoteShoppingListCopyString) as ShoppingListItem[])
-		: []
-	const remoteShoppingListCopy = new ShoppingList(storedRemoteShoppingListCopy, (newList) => {
-		localStorage.setItem("remote-shopping-list", JSON.stringify(newList))
-	})
-
-	const storedEventQueueString = localStorage.getItem("event-queue")
-	const storedEventQueue = storedEventQueueString ? (JSON.parse(storedEventQueueString) as ShoppingListEvent[]) : []
-	const eventQueue = new EventQueue<ShoppingListEvent>(storedEventQueue, (events) => {
-		localStorage.setItem("event-queue", JSON.stringify(events))
-	})
-
-	const client = new Client({
-		shoppingList,
-		remoteShoppingListCopy,
-		serverConnection,
-		eventQueue,
-	})
-
-	const isOnline = useConnectivitySignal()
-
-	createEffect(() => {
-		if (isOnline()) client.connect()
-		else serverConnection.disconnect()
-	})
-
-	return { connectionStatus, client, items: list.items }
-}
+import { ConnectionWarning } from "./ConnectionWarning"
 
 const ITEM_HEIGHT = 40
 const ITEM_HEIGHT_PX = `${ITEM_HEIGHT}px`
 
 export function Home(props: { softwareKeyboardShown: boolean }) {
-	const { connectionStatus, client, items } = createClient()
-
-	const sortedList = () => {
-		return [...items].sort((a, b) => a.position - b.position)
-	}
+	const sortedList = () => myShoppingList.toSorted((a, b) => a.position - b.position)
 
 	const activeList = () => sortedList().filter((item) => !item.checked)
 	const checkedList = () => sortedList().filter((item) => item.checked)
 
 	const [showChecked, setShowChecked] = createSignal(false)
 
-	const actions = {
-		deleteItem: client.deleteItem.bind(client),
-		setChecked: client.setItemChecked.bind(client),
-		renameItem: client.renameItem.bind(client),
-	}
-
 	const [activeItem, setActiveItem] = createSignal<ShoppingListItem | null>(null)
 
 	const onDragStart = ({ draggable }: DragEvent) => {
@@ -105,16 +45,16 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 			const fromIndex = currentIds.indexOf(draggable.id as string)
 			const toIndex = currentIds.indexOf(droppable.id as string)
 
-			const fromPosition = activeList()[fromIndex].position ?? fromIndex
-			const toPosition = activeList()[toIndex].position ?? toIndex
+			const fromPosition = activeList()[fromIndex].position
+			const toPosition = activeList()[toIndex].position
 
 			if (fromIndex !== toIndex) {
-				client.moveItem(draggable.id as string, { fromPosition, toPosition })
+				shopping.moveItem(draggable.id as string, { fromPosition, toPosition })
 			}
 		}
 	}
 
-	const ids = () => activeList().map(({ id }) => id)
+	const ids = () => activeList().map((item) => item.id)
 
 	const [scrollRef, setScrollRef] = createSignal<HTMLElement | null>(null)
 
@@ -138,10 +78,7 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 	return (
 		<>
 			<div style={props.softwareKeyboardShown ? { display: "none" } : {}}>
-				<ConnectionWarning
-					isAuthenticated={connectionStatus().authenticated}
-					isConnected={connectionStatus().connected}
-				/>
+				<ConnectionWarning isConnected={isConnected()} />
 			</div>
 
 			<div ref={setScrollRef} class="text-lg flex-1 overflow-auto">
@@ -151,7 +88,7 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 					<ul class="flex flex-col">
 						<SortableProvider ids={ids()}>
 							<RowAnimator>
-								<For each={activeList()}>{(item) => <ItemRow item={item} actions={actions} />}</For>
+								<For each={activeList()}>{(item) => <ItemRow item={item} />}</For>
 							</RowAnimator>
 						</SortableProvider>
 					</ul>
@@ -187,7 +124,7 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 									</h2>
 								</button>
 
-								<button type="button" class="px-3 py-1" onClick={() => void client.clearCheckedItems()}>
+								<button type="button" class="px-3 py-1" onClick={() => shopping.clearCheckedItems()}>
 									Clear all
 								</button>
 							</div>
@@ -201,7 +138,7 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 										exit={{ opacity: 0, transition: { duration: 0.2 } }}
 									>
 										<RowAnimator>
-											<For each={checkedList()}>{(item) => <ItemRow item={item} actions={actions} />}</For>
+											<For each={checkedList()}>{(item) => <ItemRow item={item} />}</For>
 										</RowAnimator>
 									</Motion.ul>
 								</Show>
@@ -211,7 +148,7 @@ export function Home(props: { softwareKeyboardShown: boolean }) {
 				</Presence>
 			</div>
 
-			<NewItem onCreate={(name) => void client.addItem(name)} />
+			<NewItem onCreate={(name) => shopping.addItem(name)} />
 		</>
 	)
 }

packages/app/src/components/ItemRow.tsx

@@ -1,19 +1,14 @@
 import { createSortable, transformStyle, useDragDropContext } from "@thisbeyond/solid-dnd"
 import type { ShoppingListItem } from "lib"
 import { Show, batch, createSignal } from "solid-js"
+import { shopping } from "~/lib/shopping-list"
 import IconPadding from "~icons/ci/drag-vertical"
 import IconTrash from "~icons/ci/trash-full"
 import { Button } from "./Button"
 
-interface Actions {
-	deleteItem: (id: string) => void
-	setChecked: (id: string, checked: boolean) => void
-	renameItem: (id: string, name: string) => void
-}
-
 const [focusingSomeRow, setFocusingSomeRow] = createSignal(false)
 
-export function ItemRow(props: { item: ShoppingListItem; actions: Actions }) {
+export function ItemRow(props: { item: ShoppingListItem }) {
 	const [hoveringThisRow, setHoveringThisRow] = createSignal(false)
 	const [focusingThisRow, setFocusingThisRow] = createSignal(false)
 
@@ -22,7 +17,7 @@ export function ItemRow(props: { item: ShoppingListItem; actions: Actions }) {
 	const nameHasChanged = () => newName() !== props.item.name
 
 	function submitNameChange() {
-		if (nameHasChanged()) props.actions.renameItem(props.item.id, newName())
+		if (nameHasChanged()) shopping.renameItem(props.item.id, newName())
 	}
 
 	let nameInputField: HTMLInputElement | undefined
@@ -81,7 +76,7 @@ export function ItemRow(props: { item: ShoppingListItem; actions: Actions }) {
 							type="checkbox"
 							checked={props.item.checked}
 							onChange={(event) => {
-								props.actions.setChecked(props.item.id, event.currentTarget.checked)
+								shopping.setItemChecked(props.item.id, event.currentTarget.checked)
 							}}
 						/>
 					</label>
@@ -110,7 +105,7 @@ export function ItemRow(props: { item: ShoppingListItem; actions: Actions }) {
 
 				<Show when={showingActions()}>
 					<div class="flex items-center">
-						<Button onClick={() => props.actions.deleteItem(props.item.id)}>
+						<Button onClick={() => shopping.removeItem(props.item.id)}>
 							<IconTrash height="100%" />
 						</Button>
 					</div>

packages/app/src/entry-server.tsx

@@ -13,7 +13,7 @@ export default createHandler(() => (
 					<meta name="description" content="Your shopping list" />
 
 					<link rel="icon" type="image/png" href="/favicon.png" />
-					<link rel="preload" href="Hubot-Sans-1.0.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+					<link rel="preload" href="/_build/Hubot-Sans-1.0.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
 
 					<Show when={import.meta.env.PROD}>
 						<link rel="manifest" type="application/manifest+json" href="/manifest.webmanifest" />

packages/app/src/lib/browser-server-connection.ts

@@ -2,10 +2,10 @@ import { z } from "zod"
 
 export const env = z
 	.object({
-		BACKEND_URL: z.string().url(),
 		WS_URL: z.string().url(),
+		ENV_DISCRIMONATOR: z.string().default("dev"),
 	})
 	.parse({
-		BACKEND_URL: import.meta.env.VITE_BACKEND_URL,
 		WS_URL: import.meta.env.VITE_WS_URL,
+		ENV_DISCRIMONATOR: import.meta.env.VITE_ENV_DISCRIMONATOR,
 	})