@atom.io/template-spa-astro-ssr 0.0.3 → 0.0.5

package/src/Inventory.tsx

@@ -0,0 +1,107 @@
+import type { SpaElement } from "@atom.io/spa"
+import { useGetter, useId, useLoadable, useSetter, useStore } from "@atom.io/spa"
+import { resetInStore } from "atom.io/internal"
+
+import { api, type Product } from "./api.ts"
+import { productAtoms, productIds, saveStatusAtoms } from "./state.ts"
+
+function StockCard(props: { id: number }): SpaElement {
+	const store = useStore()
+	const label = useId()
+	const fallback: Product = {
+		id: props.id,
+		sku: ``,
+		name: `Loading product…`,
+		stock: 0,
+		revision: 1,
+	}
+	const product = useLoadable(productAtoms, props.id, fallback)
+	const setProduct = useSetter(productAtoms, props.id)
+	const status = useGetter(saveStatusAtoms, props.id)
+	const setStatus = useSetter(saveStatusAtoms, props.id)
+	async function save(): Promise<void> {
+		if (status().saving || product().loading || product().error) return
+		setStatus({ saving: true, message: `` })
+		try {
+			const { id, stock, revision } = product().value
+			const saved = await api.inventory.setStock.mutate({ id, stock, revision })
+			setProduct(saved)
+			setStatus({ saving: false, message: `Stock saved` })
+		} catch (error) {
+			setStatus({
+				saving: false,
+				message: error instanceof Error ? error.message : `Could not save stock`,
+			})
+		}
+	}
+	return (
+		<article
+			class="product"
+			data-product={props.id}
+			aria-busy={product().loading || status().saving}
+		>
+			<header>
+				<div>
+					<p class="sku">{product().value.sku}</p>
+					<h3>{product().value.name}</h3>
+				</div>
+				<span class="source">
+					{product().loading
+						? `Loading…`
+						: product().value.stock > 0
+							? `In stock`
+							: `Out of stock`}
+				</span>
+			</header>
+			<label for={label}>Units on hand</label>
+			<input
+				id={label}
+				type="number"
+				min="0"
+				step="1"
+				value={product().value.stock}
+				disabled={product().loading || status().saving || !!product().error}
+				onInput={(event) => {
+					const stock = event.currentTarget.valueAsNumber
+					if (Number.isSafeInteger(stock) && stock >= 0) {
+						setProduct({ ...product().value, stock })
+						setStatus({ saving: false, message: `Unsaved count` })
+					}
+				}}
+			/>
+			<p class="preview" data-preview>
+				{product().value.stock} units available
+			</p>
+			<p role="status">{product().error?.message ?? status().message}</p>
+			<footer>
+				<button
+					disabled={status().saving || product().loading || !!product().error}
+					onClick={save}
+				>
+					{status().saving ? `Saving…` : `Save stock`}
+				</button>
+				<button
+					class="secondary"
+					disabled={status().saving || product().loading}
+					onClick={() => {
+						setStatus({ saving: false, message: `` })
+						resetInStore(store, productAtoms, props.id)
+					}}
+				>
+					Reload from database
+				</button>
+				<output data-revision>{product().value.revision}</output>
+			</footer>
+		</article>
+	)
+}
+
+export default function Inventory(props: { id: string }): SpaElement {
+	return (
+		<div class="product-grid" data-island={props.id}>
+			{productIds.map((id) => (
+				<StockCard key={id} id={id} />
+			))}
+		</div>
+	)
+}

package/src/api.ts

@@ -3,7 +3,7 @@ import type { inferRouterOutputs } from "@trpc/server"
 
 import type { AppRouter } from "./server/router.ts"
 
-export type Draft = inferRouterOutputs<AppRouter>[`drafts`][`get`]
+export type Product = inferRouterOutputs<AppRouter>[`inventory`][`get`]
 export const api = createTRPCClient<AppRouter>({
 	links: [httpLink({ url: `/api/trpc` })],
 })

package/src/layouts/Page.astro

@@ -10,13 +10,12 @@ interface Props {
 	<head>
 		<meta charset="UTF-8" />
 		<meta name="viewport" content="width=device-width" />
-		<title>{Astro.props.title} · Resumable drafts</title>
+		<title>{Astro.props.title} · Stockroom</title>
 		<ClientRouter />
 	</head>
 	<body>
 		<nav>
-			<a href="/" class="brand">Resumable drafts</a><a href="/about"
-			>How it works</a>
+			<a href="/" class="brand">Stockroom</a><a href="/about">How it works</a>
 		</nav>
 		<main><slot /></main>
 		<footer class="page-footer">Astro + atom.io + SPA + resumability</footer>

package/src/pages/about.astro

@@ -6,20 +6,22 @@ import Page from "../layouts/Page.astro"
 		<p class="eyebrow">One value, two beginnings</p>
 		<h1>One database. Two ways to read it.</h1>
 		<p>
-			Astro waits for the atom defaults, renders the draft cards with SPA, and
-			places the results in a JSON sidecar. The browser consumes those values
-			before hydrating the existing cards.
+			Astro waits for the atom defaults, renders the stock cards with SPA, and
+			attaches the results to each island’s HTML as seed data. The browser
+			consumes those values before hydrating the existing cards.
 		</p>
 		<p>
 			A reset calls the default again. Its server value has already been
 			consumed, so the client closure calls tRPC for a fresh database read.
-			Editing or resetting a document updates both views of that document.
+			Editing, saving, or reloading a product updates both views. Saving persists
+			the count and checks its revision so it cannot silently overwrite another
+			stock count.
 		</p>
 		<p>
 			Navigation releases the islands while keeping your shared state alive.
-			Returning renders fresh views of your edits. Refresh explicitly to fetch
-			new data. SSR and tRPC call the same function, backed by a typed SQL query.
+			Returning renders fresh views of your edits. Reload explicitly to fetch new
+			data. SSR and tRPC call the same function, backed by a typed SQL query.
 		</p>
-		<a class="back" href="/">Back to drafts →</a>
+		<a class="back" href="/">Back to inventory →</a>
 	</section>
 </Page>

package/src/pages/index.astro

@@ -1,28 +1,25 @@
 ---
-import Resumption from "resumability/Resumption.astro"
-import Drafts from "../Drafts.spa.tsx"
+import Inventory from "../Inventory.tsx"
 import Page from "../layouts/Page.astro"
 ---
-<Page title="Your drafts">
-	<Resumption>{() => (
-		<>
-			<header class="intro">
-				<p class="eyebrow">A server head start</p>
-				<h1>Pick up where the server left off.</h1>
-				<p>
-					These notes arrive from SQLite. Edit one, or refresh it from the
-					database. Both views share the same atom.io state.
-				</p>
-			</header>
-			<section class="workspace" aria-labelledby="work-heading">
-				<h2 id="work-heading">Your editor <small>Loads immediately</small></h2>
-				<Drafts id="work" client:load />
-			</section>
-			<section class="workspace" aria-labelledby="personal-heading">
-				<h2 id="personal-heading">
-					Another view <small>Same shared documents · loads when visible</small>
-				</h2><Drafts id="personal" client:visible />
-			</section>
-		</>
-	)}</Resumption>
+<Page title="Stock count">
+	<header class="intro">
+		<p class="eyebrow">Stockroom</p>
+		<h1>Count what’s on the shelf.</h1>
+		<p>
+			Update the count after checking a shelf, then save the new inventory. Both
+			views share your counts, including changes you haven’t saved yet.
+		</p>
+	</header>
+	<section class="workspace" aria-labelledby="work-heading">
+		<h2 id="work-heading">
+			Morning stock count <small>Loads immediately</small>
+		</h2>
+		<Inventory id="work" client:load />
+	</section>
+	<section class="workspace" aria-labelledby="personal-heading">
+		<h2 id="personal-heading">
+			Packing station <small>Same shared inventory · loads when visible</small>
+		</h2><Inventory id="personal" client:visible />
+	</section>
 </Page>

package/src/server/inventory.ts

@@ -0,0 +1,45 @@
+import { DatabaseSync } from "node:sqlite"
+
+import { TRPCError } from "@trpc/server"
+
+import readProductQuery from "./read-product.sql"
+
+/** SSR and tRPC share the same inferred query result. */
+// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Infer Reylo's SQL result; the type tests verify the transport contract.
+export function readProduct(id: number) {
+	const database = new DatabaseSync(`inventory.sqlite`, { readOnly: true })
+	try {
+		const product = readProductQuery.runSync(database, { id })
+		if (!product)
+			throw new TRPCError({
+				code: `NOT_FOUND`,
+				message: `Product ${id} does not exist`,
+			})
+		return product
+	} finally {
+		database.close()
+	}
+}
+
+// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Preserve the query's inferred return type through the mutation.
+export function saveStock(id: number, stock: number, revision: number) {
+	const database = new DatabaseSync(`inventory.sqlite`)
+	try {
+		database.exec(`BEGIN IMMEDIATE`)
+		const result = database
+			.prepare(
+				`UPDATE products SET stock = ?, revision = revision + 1 WHERE id = ? AND revision = ?`,
+			)
+			.run(stock, id, revision)
+		if (!result.changes)
+			throw new TRPCError({
+				code: `CONFLICT`,
+				message: `Stock changed since you loaded it. Reload before saving.`,
+			})
+		const product = readProductQuery.runSync(database, { id })!
+		database.exec(`COMMIT`)
+		return product
+	} finally {
+		database.close()
+	}
+}

package/src/server/read-product.sql

@@ -0,0 +1 @@
+SELECT id, sku, name, stock, revision FROM products WHERE id = :id;

package/src/server/router.ts

@@ -1,14 +1,23 @@
 import { initTRPC } from "@trpc/server"
 import { z } from "zod"
 
-import { readDraft } from "./drafts.ts"
+import { readProduct, saveStock } from "./inventory.ts"
 
 const t = initTRPC.create()
 export const appRouter = t.router({
-	drafts: t.router({
+	inventory: t.router({
 		get: t.procedure
 			.input(z.object({ id: z.number().int().positive() }))
-			.query(({ input }) => readDraft(input.id)),
+			.query(({ input }) => readProduct(input.id)),
+		setStock: t.procedure
+			.input(
+				z.object({
+					id: z.number().int().positive(),
+					stock: z.number().int().nonnegative(),
+					revision: z.number().int().positive(),
+				}),
+			)
+			.mutation(({ input }) => saveStock(input.id, input.stock, input.revision)),
 	}),
 })
 export type AppRouter = typeof appRouter

package/src/state.ts

@@ -0,0 +1,29 @@
+import { atomFamily, type Loadable } from "atom.io"
+import { resumable } from "resumability"
+
+import { api, type Product } from "./api.ts"
+
+export const productIds = [1, 2] as const
+
+export const productAtoms = atomFamily<Loadable<Product>, number, Error>({
+	key: `product`,
+	default: (id) =>
+		resumable({
+			key: [`product`, id],
+			server: async ({ signal }) => {
+				const { readProduct } = await import(`./server/inventory.ts`)
+				signal.throwIfAborted()
+				return readProduct(id)
+			},
+			client: ({ signal }) => api.inventory.get.query({ id }, { signal }),
+		}),
+	catch: [Error],
+})
+
+export const saveStatusAtoms = atomFamily<
+	{ saving: boolean; message: string },
+	number
+>({
+	key: `saveStatus`,
+	default: { saving: false, message: `` },
+})

package/src/style.css

@@ -63,22 +63,19 @@ h2 small {
 	color: #65776b;
 	margin-left: 12px;
 }
-astro-resumption {
-	display: contents;
-}
-.draft-grid {
+.product-grid {
 	display: grid;
 	grid-template-columns: repeat(2, minmax(0, 1fr));
 	gap: 20px;
 }
-.draft {
+.product {
 	background: #fffef9;
 	border: 1px solid #d7ded3;
 	border-radius: 16px;
 	padding: 24px;
 	box-shadow: 0 3px 12px #20392f06;
 }
-.draft header {
+.product header {
 	display: flex;
 	align-items: center;
 	justify-content: space-between;
@@ -101,18 +98,16 @@ label {
 	font-weight: 650;
 	margin-bottom: 7px;
 }
-textarea {
+input[type="number"] {
 	width: 100%;
-	min-height: 100px;
 	padding: 12px;
 	font: inherit;
-	resize: vertical;
 	color: inherit;
 	border: 1px solid #bdcbbb;
 	border-radius: 7px;
 	background: #fff;
 }
-textarea:focus {
+input[type="number"]:focus {
 	outline: 2px solid #6d9870;
 	outline-offset: 2px;
 }
@@ -122,7 +117,7 @@ textarea:focus {
 	color: #657569;
 	font-size: 0.85rem;
 }
-.draft footer {
+.product footer {
 	display: flex;
 	flex-wrap: wrap;
 	align-items: center;
@@ -157,14 +152,28 @@ output {
 	margin-block: 18px 60px;
 }
 @media (max-width: 650px) {
-	.draft-grid {
+	.product-grid {
 		grid-template-columns: 1fr;
 	}
 	h2 small {
 		display: block;
 		margin: 2px 0 0;
 	}
-	.draft {
+	.product {
 		padding: 20px;
 	}
 }
+
+.sku {
+	margin: 0 0 5px;
+	font-size: 0.72rem;
+	color: #65776b;
+}
+button:disabled {
+	opacity: 0.5;
+	cursor: wait;
+}
+button.secondary {
+	background: #e6eee1;
+	color: #22573c;
+}