@atom.io/template-spa-astro-ssr 0.0.0-stage → 0.0.1

package/README.mdx

@@ -0,0 +1,89 @@
+import Workspace from "./exhibits/workspace.sh" with { type: "code" };
+import Run from "./exhibits/run.sh" with { type: "code" };
+import Config from "./astro.config.ts" with { type: "code" };
+import Islands from "./src/pages/index.astro" with { type: "code" };
+import Model from "./src/model.ts" with { type: "code" };
+import Prepare from "./src/prepare-drafts.ts" with { type: "code" };
+import Query from "./src/server/read-draft.sql" with { type: "code" };
+import ReadDraft from "./src/server/drafts.ts" with { type: "code" };
+import Router from "./src/server/router.ts" with { type: "code" };
+
+# SPA + Astro SSR
+
+A starter with module-scoped atom definitions, server-rendered Astro islands, and typed database refreshes. It uses atom.io, @atom.io/spa, resumability/astro, Reylo over node:sqlite, and tRPC. Requires Node 24.12 or newer and TypeScript 7.1's content mappers (currently beta).
+
+## Run
+
+<Run />
+
+Inside the atom.io workspace:
+
+<Workspace />
+
+The workspace uses local unpublished packages; a packed release replaces workspace dependency ranges with published versions. Development, build, and typecheck commands initialize drafts.sqlite from schema.sql and insert missing example rows without overwriting edits. Reylo checks queries against that schema using .reylo.yaml. The generated database is ignored by Git and excluded from the package.
+
+This is an on-demand Node server application. The Astro Node adapter serves both pages and the tRPC endpoint. Start production from the template directory so it can find drafts.sqlite; supply persistent storage for that file when deploying. Initialize the database before starting a new deployment.
+
+## Rendering and caching
+
+The starter uses on-demand SSR with Astro’s built-in memoryCache provider. The public drafts page has a 60-second TTL and no stale-while-revalidate window. A cache miss reads SQLite in a request-owned store and caches the complete HTML response, including its resumption sidecar. Hits reuse that snapshot; the first request after expiry renders a new one. There are no prerendered pages. The tRPC endpoint is outside the cached route rule and returns Cache-Control: no-store, so resets always read the database.
+
+The cache belongs to one server process: it is lost on restart and is not shared across replicas. This is a small, self-contained deployment default; choose an infrastructure-backed provider when multiple instances need shared caching or invalidation. Astro disables caching in development. Build and preview the template to exercise the production cache.
+
+This template’s example data is public. When adapting it, cache the complete HTML response together with its resumption sidecar. The markup and initial values must come from the same render. Choose a freshness window and invalidation policy that match the data; do not cache a live atom.io store or reuse it across requests. Cache only responses whose data can be shared by everyone using the cache entry. Personalized snapshots need private caching or a correctly scoped cache key.
+
+The initial browser load consumes that snapshot without immediately refetching it. Expiring or invalidating the server cache affects future page loads, not an already running browser store. Keep the explicit reset/tRPC path fresh so Refresh from database can fetch the current row. ClientRouter navigation continues to preserve live browser state rather than replacing edits with another server snapshot.
+
+SSG is also compatible with resumption: the sidecar is produced during the build and remains that snapshot until the next deployment. Use it for routes whose freshness can follow deployments, while retaining on-demand API routes for resets. Astro's [on-demand rendering](https://docs.astro.build/en/guides/on-demand-rendering/) and [route caching](https://docs.astro.build/en/guides/caching/) documentation describe the route-level controls and cache providers.
+
+## Try it
+
+Both views use the same two module-scoped document tokens in one browser store and resumption scope. The initial notes come directly from SQLite during SSR. The first island hydrates its existing DOM without making an RPC request. Type into a draft before scrolling to the second view: that delayed island mounts fresh and immediately shows the edit. Typing or refreshing a document updates both views; other documents retain their values. Refresh from database resets the atom, whose client closure calls tRPC for the latest row. The returned revision identifies that read.
+
+Visit How it works and return. Astro's ClientRouter removes the old DOM and SPA releases the island subscriptions, while the application store and resumption scope stay alive. Returning islands render fresh from those live values, so an incoming server response cannot overwrite your edits. Refresh explicitly to fetch new server data. A full page load starts a new application from SSR again. Shared client requests receive the application scope's AbortSignal; navigation keeps that scope alive, while a full page exit aborts it. Resetting does not cancel earlier requests by itself.
+
+## Integrations
+
+<Config />
+
+SPA compiles the .spa.tsx components. Resumability removes inline server closures before browser import analysis, including their dynamic imports. Reylo compiles SQL imports on the server. The browser imports the tRPC router only as a type: no database module, query, or router implementation reaches executable browser code.
+
+## One query, two entry points
+
+<Query />
+
+<ReadDraft />
+
+SSR calls readDraft directly. The tRPC procedure validates its input and calls the same function:
+
+<Router />
+
+Reylo infers the row type from SQL and the database schema. The return type flows through the router into the client and atom, without a handwritten response DTO. The type check uses TypeScript's runExternalCode flag to run Reylo's content mapper.
+
+## Module-scoped atom defaults
+
+<Model />
+
+The family key supplies the query input and resumability key. Atom definitions live on the module graph. All browser views share values; each SSR request has its own store. First browser reads consume the seed. Subsequent defaults use tRPC, with errors available through useLoadable for retry.
+
+## Normal Astro islands
+
+<Islands />
+
+The first workspace uses client:load; the second uses client:visible. Both render their initial data on the server. Deferred child functions keep Astro's eager framework-slot evaluation inside Resumption's async collection scope. One Resumption wrapper covers both views and collects each document once. Its sidecar precedes all the islands, so either can activate first. Keep the wrapper around page content inside the HTML body, not around the document itself.
+
+Drafts.prepareStore initializes the store already selected by SPA:
+
+<Prepare />
+
+On the server, Resumption's async collection supplies the scope. In the browser, application.get creates one resumption scope and registers its cleanup once. Each preparation adds the surrounding sidecar; consumed keys cannot be reseeded. Store.runDefault activates that scope whenever a default executes, including lazy family members and transactional resets. Application.canResume controls whether unread seeds may initialize client-capable defaults: after an edit or navigation, those defaults use the client path. The callback awaits the initial reads before rendering or hydration. There are no model factories, model props, or store-to-model registries.
+
+SPA owns the request lifetime through the end of streaming and the browser application lifetime across navigation. Individual islands own only their DOM and subscriptions. Shared preparation resources survive an individual island failing or unmounting. Resumability stays independent of SPA, atom.io, Reylo, and tRPC. Treat all sidecar data as public browser-visible data.
+
+## Validation
+
+The browser check runs against both the production Node server and the Astro dev server. It inspects real SSR content, verifies that initial hydration preserves textarea nodes and IDs while a delayed island replaces stale DOM, and asserts zero RPC requests during hydration. In production, it verifies byte-identical cached HTML and sidecars after SQLite changes, waits for the real 60-second TTL to expire, and checks that a new snapshot is rendered and cached. Development checks verify fresh SSR instead. Repeated resets fetch changed rows through tRPC with no-store headers, including after resuming an older cached snapshot; resets do not rewrite the page cache. It also checks shared document state, client:load and client:visible scheduling, fresh mounts and preserved edits after navigation, and removal of server modules from browser scripts. Browser exceptions fail the check. Type tests reject invalid RPC input and verify the inferred response fields.
+
+## License
+
+MPL-2.0 or later. See [LICENSE](./LICENSE).

package/_gitignore

@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.astro/
+.env
+test-results/
+drafts.sqlite*

package/astro.config.ts

@@ -0,0 +1,17 @@
+import node from "@astrojs/node"
+import spa from "@atom.io/spa/astro"
+import { defineConfig, memoryCache } from "astro/config"
+import resumability from "resumability/astro"
+import reylo from "reylo/vite"
+
+export default defineConfig({
+	output: `server`,
+	adapter: node({ mode: `standalone` }),
+	cache: { provider: memoryCache() },
+	routeRules: {
+		// Cache the public HTML and its resumption sidecar as one snapshot.
+		[`/`]: { maxAge: 60 },
+	},
+	integrations: [resumability(), spa()],
+	vite: { plugins: [reylo()] },
+})

package/exhibits/run.sh

@@ -0,0 +1,10 @@
+npm install
+npm run dev
+
+# Build and serve the production output.
+npm run build
+npm run preview
+
+# Install the test browser, then verify production and development.
+npx playwright install chromium
+npm test

package/exhibits/workspace.sh

@@ -0,0 +1,2 @@
+pnpm exec turbo run build --filter=@atom.io/template-spa-astro-ssr...
+pnpm --filter @atom.io/template-spa-astro-ssr dev

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@atom.io/template-spa-astro-ssr",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.0.1",
+  "description": "Astro, SPA, and resumable atom defaults with SQLite server data.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/jeremybanka/atom.io.git",
+    "directory": "templates/spa-astro-ssr"
+  },
+  "license": "MPL-2.0",
+  "type": "module",
+  "files": [
+    "src",
+    "tests",
+    "exhibits",
+    "astro.config.ts",
+    "tsconfig.json",
+    "README.mdx",
+    "_gitignore",
+    "scripts",
+    "schema.sql",
+    ".reylo.yaml"
+  ],
+  "dependencies": {
+    "@astrojs/node": "11.1.9",
+    "@atom.io/spa": "0.0.1",
+    "@trpc/client": "11.22.1",
+    "@trpc/server": "11.22.1",
+    "astro": "7.4.4",
+    "atom.io": "0.54.3",
+    "resumability": "0.0.1",
+    "reylo": "0.6.0",
+    "zod": "4.6.7"
+  },
+  "devDependencies": {
+    "@reylosql/sqlite": "0.6.0",
+    "@types/node": "26.6.6",
+    "galley.md": "0.3.1",
+    "oxlint": "1.90.0",
+    "oxlint-tsgolint": "7.0.2005",
+    "playwright": "1.64.1",
+    "typescript": "7.1.0-beta",
+    "vite": "8.3.5"
+  },
+  "engines": {
+    "node": ">=24.12.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "npm run db:seed && astro dev",
+    "build": "npm run db:seed && tsc --noEmit --runExternalCode && astro build",
+    "preview": "astro preview",
+    "lint:types": "npm run db:seed && tsc --noEmit --runExternalCode",
+    "lint:oxlint": "oxlint src tests astro.config.ts",
+    "test": "npm run test:browser",
+    "test:browser": "npm run build && node tests/browser.mjs && node tests/browser.mjs --dev",
+    "readme:write": "galley write README.mdx",
+    "readme:check": "galley check README.mdx",
+    "db:seed": "node scripts/seed.ts"
+  }
 }

package/schema.sql

@@ -0,0 +1,5 @@
+CREATE TABLE IF NOT EXISTS drafts (
+ id INTEGER PRIMARY KEY,
+ title TEXT NOT NULL,
+ body TEXT NOT NULL
+) STRICT;

package/scripts/seed.ts

@@ -0,0 +1,14 @@
+import { readFileSync } from "node:fs"
+import { DatabaseSync } from "node:sqlite"
+
+const database = new DatabaseSync(`drafts.sqlite`)
+try {
+	database.exec(readFileSync(new URL(`../schema.sql`, import.meta.url), `utf8`))
+	const insert = database.prepare(
+		`INSERT OR IGNORE INTO drafts (id, title, body) VALUES (?, ?, ?)`,
+	)
+	for (const id of [1, 2])
+		insert.run(id, `Draft ${id}`, `A note from SQLite for document ${id}.`)
+} finally {
+	database.close()
+}

package/src/Drafts.spa.tsx

@@ -0,0 +1,62 @@
+import type { VNode } from "@atom.io/spa"
+import { useId, useLoadable, useSetter, useStore } from "@atom.io/spa"
+import { resetInStore } from "atom.io/internal"
+
+import type { Draft } from "./api.ts"
+import { documentIds, draftAtoms } from "./model.ts"
+import { prepareDrafts } from "./prepare-drafts.ts"
+
+function DraftCard(props: { id: number }): VNode {
+	const store = useStore()
+	const label = useId()
+	const fallback: Draft = {
+		id: props.id,
+		title: `Draft ${props.id}`,
+		body: ``,
+		revision: `00000000-0000-0000-0000-000000000000`,
+	}
+	const draft = useLoadable(draftAtoms, props.id, fallback)
+	const setDraft = useSetter(draftAtoms, props.id)
+	return (
+		<article class="draft" data-document={props.id} aria-busy={draft().loading}>
+			<header>
+				<h3>{draft().value.title}</h3>
+				<span class="source">{draft().loading ? `Refreshing…` : `Ready`}</span>
+			</header>
+			<label for={label}>Your note</label>
+			<textarea
+				id={label}
+				value={draft().value.body}
+				onInput={(event) => {
+					setDraft({ ...draft().value, body: event.currentTarget.value })
+				}}
+			/>
+			<p class="preview" data-preview>
+				{draft().value.body}
+			</p>
+			<p role="status">{draft().error?.message ?? ``}</p>
+			<footer>
+				<button
+					onClick={() => {
+						resetInStore(store, draftAtoms, props.id)
+					}}
+				>
+					Refresh from database
+				</button>
+				<output data-revision>{draft().value.revision}</output>
+			</footer>
+		</article>
+	)
+}
+
+export default function Drafts(props: { id: string }): VNode {
+	return (
+		<div class="draft-grid" data-island={props.id}>
+			{documentIds.map((id) => (
+				<DraftCard key={id} id={id} />
+			))}
+		</div>
+	)
+}
+
+Drafts.prepareStore = prepareDrafts

package/src/api.ts

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

package/src/layouts/Page.astro

@@ -0,0 +1,24 @@
+---
+import { ClientRouter } from "astro:transitions"
+import "../style.css"
+interface Props {
+	title: string
+}
+---
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<meta name="viewport" content="width=device-width" />
+		<title>{Astro.props.title} · Resumable drafts</title>
+		<ClientRouter />
+	</head>
+	<body>
+		<nav>
+			<a href="/" class="brand">Resumable drafts</a><a href="/about"
+			>How it works</a>
+		</nav>
+		<main><slot /></main>
+		<footer class="page-footer">Astro + atom.io + SPA + resumability</footer>
+	</body>
+</html>

package/src/model.ts

@@ -0,0 +1,21 @@
+import { atomFamily, type Loadable } from "atom.io"
+import { resumable } from "resumability"
+
+import { api, type Draft } from "./api.ts"
+
+export const documentIds = [1, 2] as const
+
+export const draftAtoms = atomFamily<Loadable<Draft>, number, Error>({
+	key: `draft`,
+	default: (id) =>
+		resumable({
+			key: [`draft`, id],
+			server: async ({ signal }) => {
+				const { readDraft } = await import(`./server/drafts.ts`)
+				signal.throwIfAborted()
+				return readDraft(id)
+			},
+			client: ({ signal }) => api.drafts.get.query({ id }, { signal }),
+		}),
+	catch: [Error],
+})

package/src/pages/about.astro

@@ -0,0 +1,25 @@
+---
+import Page from "../layouts/Page.astro"
+---
+<Page title="How it works">
+	<section class="intro">
+		<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.
+		</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.
+		</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.
+		</p>
+		<a class="back" href="/">Back to drafts →</a>
+	</section>
+</Page>

package/src/pages/api/trpc/[...trpc].ts

@@ -0,0 +1,13 @@
+import { fetchRequestHandler } from "@trpc/server/adapters/fetch"
+import type { APIRoute } from "astro"
+
+import { appRouter } from "../../../server/router.ts"
+
+export const ALL: APIRoute = ({ request }) =>
+	fetchRequestHandler({
+		endpoint: `/api/trpc`,
+		req: request,
+		router: appRouter,
+		createContext: () => ({}),
+		responseMeta: () => ({ headers: { "Cache-Control": `no-store` } }),
+	})

package/src/pages/index.astro

@@ -0,0 +1,28 @@
+---
+import Resumption from "resumability/Resumption.astro"
+import Drafts from "../Drafts.spa.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>

package/src/prepare-drafts.ts

@@ -0,0 +1,22 @@
+import type { AstroStorePreparation } from "@atom.io/spa/astro"
+import { getFromStore } from "atom.io/internal"
+import { createResumption } from "resumability/client"
+import { documentIds, draftAtoms } from "./model.ts"
+
+export const prepareDrafts: AstroStorePreparation = async (
+	store,
+	_props,
+	{ element, application },
+) => {
+	if (element) {
+		const scope = application.get(createResumption, () => {
+			const created = createResumption()
+			application.onCleanup(created.dispose)
+			store.runDefault = (run) =>
+				created.run(run, { resume: application.canResume })
+			return created
+		})
+		scope.add(element.closest(`astro-resumption`)!)
+	}
+	await Promise.all(documentIds.map((id) => getFromStore(store, draftAtoms, id)))
+}

package/src/server/drafts.ts

@@ -0,0 +1,17 @@
+import { randomUUID } from "node:crypto"
+import { DatabaseSync } from "node:sqlite"
+
+import readDraftQuery from "./read-draft.sql"
+
+/** Both SSR and tRPC use this function and its inferred query result. */
+// oxlint-disable-next-line typescript/explicit-module-boundary-types -- Infer the response from Reylo's content-mapped SQL type; tsc verifies the full RPC contract.
+export function readDraft(id: number) {
+	const database = new DatabaseSync(`drafts.sqlite`, { readOnly: true })
+	try {
+		const draft = readDraftQuery.runSync(database, { id })
+		if (!draft) throw new Error(`Draft ${id} does not exist`)
+		return { ...draft, revision: randomUUID() }
+	} finally {
+		database.close()
+	}
+}

package/src/server/read-draft.sql

@@ -0,0 +1 @@
+SELECT id, title, body FROM drafts WHERE id = :id;

package/src/server/router.ts

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

package/src/style.css

@@ -0,0 +1,170 @@
+:root {
+	font-family: system-ui, sans-serif;
+	color: #20392f;
+	background: #f5f4ee;
+	font-synthesis: none;
+	line-height: 1.55;
+}
+* {
+	box-sizing: border-box;
+}
+body {
+	margin: 0;
+}
+nav, main, .page-footer {
+	width: min(1100px, calc(100% - 48px));
+	margin-inline: auto;
+}
+nav {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding-block: 25px;
+	border-bottom: 1px solid #d5ddd4;
+}
+a {
+	color: #256745;
+	text-underline-offset: 4px;
+}
+.brand {
+	font-weight: 750;
+	text-decoration: none;
+}
+.intro {
+	max-width: 760px;
+	padding: 44px 0 24px;
+}
+.eyebrow {
+	color: #52765d;
+	text-transform: uppercase;
+	letter-spacing: 0.13em;
+	font-size: 0.78rem;
+	font-weight: 750;
+}
+h1 {
+	font-size: clamp(2rem, 5vw, 3.4rem);
+	line-height: 1.1;
+	letter-spacing: -0.04em;
+	margin: 16px 0;
+}
+.intro > p:not(.eyebrow) {
+	color: #56645d;
+	font-size: 1.1rem;
+}
+.workspace {
+	margin-block: 24px 36px;
+}
+h2 {
+	font-size: 1.2rem;
+}
+h2 small {
+	font-size: 0.78rem;
+	font-weight: 450;
+	color: #65776b;
+	margin-left: 12px;
+}
+astro-resumption {
+	display: contents;
+}
+.draft-grid {
+	display: grid;
+	grid-template-columns: repeat(2, minmax(0, 1fr));
+	gap: 20px;
+}
+.draft {
+	background: #fffef9;
+	border: 1px solid #d7ded3;
+	border-radius: 16px;
+	padding: 24px;
+	box-shadow: 0 3px 12px #20392f06;
+}
+.draft header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	margin-bottom: 20px;
+}
+h3 {
+	margin: 0;
+	font-size: 1.1rem;
+}
+.source {
+	font-size: 0.74rem;
+	padding: 3px 10px;
+	border-radius: 12px;
+	background: #e6eee1;
+	color: #3d643c;
+}
+label {
+	display: block;
+	font-size: 0.78rem;
+	font-weight: 650;
+	margin-bottom: 7px;
+}
+textarea {
+	width: 100%;
+	min-height: 100px;
+	padding: 12px;
+	font: inherit;
+	resize: vertical;
+	color: inherit;
+	border: 1px solid #bdcbbb;
+	border-radius: 7px;
+	background: #fff;
+}
+textarea:focus {
+	outline: 2px solid #6d9870;
+	outline-offset: 2px;
+}
+.preview {
+	min-height: 24px;
+	overflow-wrap: anywhere;
+	color: #657569;
+	font-size: 0.85rem;
+}
+.draft footer {
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+	gap: 12px;
+}
+button {
+	border: 0;
+	border-radius: 7px;
+	padding: 9px 12px;
+	background: #22573c;
+	color: #fff;
+	cursor: pointer;
+	font: inherit;
+	font-size: 0.82rem;
+}
+button:hover {
+	background: #123c27;
+}
+output {
+	color: #788878;
+	font-size: 0.65rem;
+	overflow-wrap: anywhere;
+}
+.page-footer {
+	color: #6b7e6f;
+	font-size: 0.78rem;
+	padding-block: 24px;
+	border-top: 1px solid #d5ddd4;
+}
+.back {
+	display: inline-block;
+	margin-block: 18px 60px;
+}
+@media (max-width: 650px) {
+	.draft-grid {
+		grid-template-columns: 1fr;
+	}
+	h2 small {
+		display: block;
+		margin: 2px 0 0;
+	}
+	.draft {
+		padding: 20px;
+	}
+}