@stone-js/starters 0.8.12 → 0.8.14

package/monorepo-declarative/apps/mobile/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@acme/mobile",
+  "private": true,
+  "version": "1.0.0",
+  "description": "The mobile application: the shared domain, running on a phone.",
+  "author": "Mr. Stone <evensstone@gmail.com>",
+  "license": "MIT",
+  "main": "index.ts",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web",
+    "export": "expo export",
+    "modules": "node -e \"require('@stone-js/use-react-native/metro').writeManifest(process.cwd())\"",
+    "typecheck": "npm run modules && tsc --noEmit",
+    "test": "vitest run",
+    "test:cvg": "npm run test -- --coverage"
+  },
+  "dependencies": {
+    "@acme/domain": "workspace:*",
+    "@stone-js/browser-core": "^0.8.13",
+    "@stone-js/core": "^0.8.13",
+    "@stone-js/react-native-adapter": "^0.8.13",
+    "@stone-js/router": "^0.8.13",
+    "@stone-js/use-react-native": "^0.8.13",
+    "expo": "~57.0.14",
+    "expo-status-bar": "~57.0.1",
+    "fast-text-encoding": "^1.0.6",
+    "react": "19.2.3",
+    "react-native": "0.86.2",
+    "react-native-url-polyfill": "^3.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.28.0",
+    "@stone-js/cli": "^0.8.13",
+    "@stone-js/testing": "^0.8.13",
+    "@types/react": "~19.2.2",
+    "@vitest/coverage-v8": "^3.0.9",
+    "babel-preset-expo": "^57.0.7",
+    "typescript": "~6.0.3",
+    "vitest": "^3.0.9"
+  }
+}

package/monorepo-declarative/apps/mobile/tests/TaskListScreen.spec.ts

@@ -0,0 +1,54 @@
+import { stoneApp } from '@stone-js/core'
+import { Application } from '../app/Application'
+import { ScreenStack } from '@stone-js/use-react-native'
+import { TaskListScreen } from '../app/TaskListScreen'
+import { NavigationSource } from '@stone-js/react-native-adapter'
+
+/**
+ * The mobile application, booted under Node and asked real questions.
+ *
+ * Nothing is mocked. The kernel, the router, the adapter and the renderer are the ones a phone runs,
+ * and the domain is the very same `@acme/domain` the web application uses. What a device adds is a
+ * screen to draw on, and this asserts what the framework resolved before drawing.
+ *
+ * Read it next to `apps/web/tests/TaskListPage.spec.ts`: same domain, same questions, same answers.
+ */
+describe('TaskListScreen', () => {
+  const screens = ScreenStack.create()
+  const navigation = NavigationSource.create({ baseUrl: 'acme://app' })
+
+  // Booted once for the whole suite, as on a device: the default blueprints are shared module
+  // objects, so booting the same modules twice in one process would accumulate route definitions.
+  beforeAll(async () => {
+    await stoneApp({
+      modules: [
+        Application,
+        TaskListScreen,
+        { stone: { reactNative: { navigationSource: navigation }, useReactNative: { screenStack: screens } } }
+      ]
+    }).run()
+  })
+
+  const settle = async (): Promise<void> => { await new Promise((resolve) => setImmediate(resolve)) }
+
+  it('puts the task list on the stack at launch, counted by the shared domain', () => {
+    expect(screens.size()).toBe(1)
+    expect(screens.top()?.path).toBe('/')
+    expect(screens.top()?.title).toBe('1 left · Acme tasks')
+  })
+
+  it('toggles a task through the same domain the web app uses', async () => {
+    navigation.navigate('acme://app/?toggle=3')
+    await settle()
+
+    expect(screens.top()?.title).toBe('0 left · Acme tasks')
+  })
+
+  it('surfaces an unknown route instead of crashing', async () => {
+    navigation.navigate('acme://app/nowhere')
+    await settle()
+
+    // An error page is still a screen: the application stays up and shows something.
+    expect(screens.top()?.path).not.toBe('/')
+  })
+})

package/monorepo-declarative/apps/mobile/tests/stubs/react-native.ts

@@ -0,0 +1,42 @@
+/**
+ * What `react-native` is under a Node test runner: absent.
+ *
+ * The screen imports `View`, `Text` and friends at module scope, so the specifier has to resolve to
+ * something for the application to even load. It resolves to this: the primitives as inert
+ * identifiers, which is enough because a resolved screen is a React element that has been *built*,
+ * not mounted. React never calls these components here, so there is nothing for them to do.
+ *
+ * That is the line this test draws, and it is the honest one. What runs under Node is the domain:
+ * the kernel, the router, the loader, the head. What a `View` looks like is React Native's business,
+ * and the way to see it is to run the application, either on a device or in a browser tab through
+ * `npx expo start --web`.
+ */
+const component = (name: string): string => name
+
+export const View = component('View')
+export const Text = component('Text')
+export const Image = component('Image')
+export const Pressable = component('Pressable')
+export const ScrollView = component('ScrollView')
+
+export const StyleSheet = {
+  create: <T>(styles: T): T => styles,
+  flatten: (style: unknown): unknown => style
+}
+
+export const Platform = {
+  OS: 'ios',
+  select: <T>(spec: Record<string, T>): T | undefined => spec.ios ?? spec.default
+}
+
+export const Linking = {
+  openURL: async (): Promise<void> => {},
+  getInitialURL: async (): Promise<string | null> => null,
+  addEventListener: () => ({ remove: () => {} })
+}
+
+export const useColorScheme = (): string | null => null
+
+export default {
+  View, Text, Image, Pressable, ScrollView, StyleSheet, Platform, Linking, useColorScheme
+}

package/monorepo-declarative/apps/mobile/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "strict": true,
+    "experimentalDecorators": true,
+    "types": ["vitest/globals"]
+  },
+  "include": [
+    "app",
+    "tests",
+    "App.tsx",
+    "index.ts",
+    "vitest.config.ts"
+  ]
+}

package/monorepo-declarative/apps/mobile/vitest.config.ts

@@ -0,0 +1,35 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  // Under Node there is no React Native, and the screen imports its primitives at module scope, so
+  // the specifier has to resolve somewhere. `tests/stubs/react-native.ts` explains what it stands
+  // for and where the line is drawn.
+  resolve: {
+    alias: {
+      'react-native': fileURLToPath(new URL('./tests/stubs/react-native.ts', import.meta.url))
+    }
+  },
+  // `experimentalDecorators` is enabled in tsconfig.json for tsc TYPING only (the framework types
+  // its decorators with the legacy signatures). At RUNTIME Stone.js requires standard 2023-11
+  // decorators, so esbuild must ignore that flag and emit the standard semantics, `Symbol.metadata`
+  // included (esbuild 0.25+ implements them correctly on its own).
+  esbuild: {
+    tsconfigRaw: {
+      compilerOptions: {
+        experimentalDecorators: false
+      }
+    }
+  },
+  test: {
+    globals: true,
+    environment: 'node',
+    include: ['./tests/**/*.{test,spec}.?(c|m)[jt]s?(x)'],
+    coverage: {
+      provider: 'v8',
+      include: ['app/**/*.{ts,tsx}'],
+      reporter: ['text', 'html'],
+      reportsDirectory: './coverage'
+    }
+  }
+})

package/monorepo-declarative/apps/web/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Stone Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/monorepo-declarative/apps/web/app/Application.ts

@@ -0,0 +1,23 @@
+import { domainBlueprint } from '@acme/domain'
+import { Routing } from '@stone-js/router'
+import { UseReact } from '@stone-js/use-react'
+import { LogLevel, StoneApp } from '@stone-js/core'
+import { Browser } from '@stone-js/browser-adapter'
+
+/**
+ * The web application.
+ *
+ * Four decorators and one blueprint. `@Browser()` says where events come from, `@UseReact()` says
+ * what a resolved route becomes, and `domainBlueprint` brings in the shared domain, which is the
+ * only line here that has anything to do with what the application is *about*.
+ *
+ * Compare with `apps/mobile/app/Application.ts`: the same file with two decorators swapped. That is
+ * the whole difference between a website and a native application in this repository.
+ *
+ * Pages live in their own files, one route each. See `app/TaskListPage.tsx`.
+ */
+@Routing()
+@Browser()
+@UseReact()
+@StoneApp({ name: 'acme-web', logger: { level: LogLevel.INFO } }, [domainBlueprint])
+export class Application {}

package/monorepo-declarative/apps/web/app/TaskListPage.tsx

@@ -0,0 +1,95 @@
+import { JSX } from 'react'
+import { Promiseable } from '@stone-js/core'
+import { Task, TaskService } from '@acme/domain'
+import { HeadContext, IPage, Page, PageHeadContext, PageRenderContext, ReactIncomingEvent } from '@stone-js/use-react'
+
+/**
+ * The task list, as a web page.
+ *
+ * Read `handle` and `head` next to `apps/mobile/app/TaskListScreen.tsx`: they are the same, line for
+ * line, because answering a route is not a platform question. Only `render` differs, and only because
+ * a browser draws with `div` and a phone draws with `View`.
+ */
+@Page('/')
+export class TaskListPage implements IPage<ReactIncomingEvent> {
+  private readonly tasks: TaskService
+
+  /**
+   * @param tasks - The shared domain service, under the alias its blueprint registered.
+   */
+  constructor ({ tasks }: { tasks: TaskService }) {
+    this.tasks = tasks
+  }
+
+  /**
+   * Answer the route.
+   *
+   * @param event - The incoming event.
+   * @returns The page's data.
+   */
+  handle (event: ReactIncomingEvent): TaskListData {
+    const toggle = event.get<string>('toggle')
+
+    if (toggle !== undefined) { this.tasks.toggle(toggle) }
+
+    return { tasks: this.tasks.all(), remaining: this.tasks.remaining() }
+  }
+
+  /**
+   * Name the page.
+   *
+   * @returns The head context.
+   */
+  head ({ data }: PageHeadContext<TaskListData>): Promiseable<HeadContext> {
+    return {
+      title: `${data?.remaining ?? 0} left · Acme tasks`,
+      description: 'One domain, two applications. This is the web one.'
+    }
+  }
+
+  /**
+   * Draw the page.
+   *
+   * @returns The rendered page.
+   */
+  render ({ data }: PageRenderContext<TaskListData>): JSX.Element {
+    return (
+      <main className='stone-welcome'>
+        <div className='glow' aria-hidden='true' />
+        <section className='hero'>
+          <img className='mark' src='/logo.svg' alt='Stone.js' width={104} height={104} />
+          <p className='eyebrow'>ONE DOMAIN, TWO APPS</p>
+          <h1 className='title'>Acme tasks</h1>
+          <p className='lead'>{data?.remaining} left to do</p>
+
+          <ul className='tasks'>
+            {data?.tasks.map((task) => (
+              <li key={task.id} className={task.done ? 'task done' : 'task'}>
+                <a href={`/?toggle=${task.id}`}>
+                  <span className='box' aria-hidden='true'>{task.done ? '●' : '○'}</span>
+                  {task.title}
+                </a>
+              </li>
+            ))}
+          </ul>
+
+          <nav className='links'>
+            <a href='https://stonejs.dev/docs' target='_blank' rel='noreferrer noopener'>Documentation</a>
+            <span className='edit'>Edit <b>apps/web/app/TaskListPage.tsx</b></span>
+          </nav>
+        </section>
+        <footer className='brand'>
+          <span className='dot'>●</span> the same <b>@acme/domain</b> runs the mobile app
+        </footer>
+      </main>
+    )
+  }
+}
+
+/**
+ * What the page hands to its renderer.
+ */
+export interface TaskListData {
+  tasks: Task[]
+  remaining: number
+}

package/monorepo-declarative/apps/web/assets/css/index.css

@@ -0,0 +1,220 @@
+/**
+ * Stone.js starter — brand welcome screen.
+ * Identity: "Obsidienne & Braise" — obsidian ground, ember (braise) accent, the Portal mark.
+ * Theme-aware: dark by default, light under prefers-color-scheme: light.
+ */
+:root {
+  --ink: #14100E;
+  --ink-2: #1E1815;
+  --cream: #F4EFE6;
+  --cream-dim: #B8AE9E;
+  --ember-1: #FFC46B;
+  --ember-2: #FF5A1F;
+  --line: rgba(244, 239, 230, 0.10);
+  --card: rgba(244, 239, 230, 0.04);
+  --bg: radial-gradient(1200px 600px at 50% -10%, #241C17 0%, var(--ink) 55%);
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    --ink: #F4EFE6;
+    --ink-2: #ffffff;
+    --cream: #1B1613;
+    --cream-dim: #6B6154;
+    --line: rgba(27, 22, 19, 0.10);
+    --card: rgba(27, 22, 19, 0.03);
+    --bg: radial-gradient(1200px 600px at 50% -10%, #FFFFFF 0%, #F1E9DC 60%);
+  }
+}
+
+* { box-sizing: border-box; }
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  color: var(--cream);
+  background: var(--ink);
+  font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.stone-welcome {
+  position: relative;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  background: var(--bg);
+  overflow: hidden;
+}
+
+/* Ember glow behind the mark. */
+.stone-welcome .glow {
+  position: absolute;
+  top: 8%;
+  left: 50%;
+  width: 520px;
+  height: 520px;
+  transform: translateX(-50%);
+  background: radial-gradient(circle, rgba(255, 90, 31, 0.22) 0%, rgba(255, 90, 31, 0) 68%);
+  filter: blur(8px);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.stone-welcome .hero {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 680px;
+  text-align: center;
+  animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
+}
+
+.stone-welcome .mark {
+  width: 104px;
+  height: 104px;
+  filter: drop-shadow(0 8px 28px rgba(255, 90, 31, 0.35));
+}
+
+.stone-welcome .eyebrow {
+  margin: 22px 0 0;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.28em;
+  text-transform: uppercase;
+  color: var(--cream-dim);
+}
+
+.stone-welcome .title {
+  margin: 8px 0 0;
+  font-size: clamp(44px, 8vw, 76px);
+  font-weight: 800;
+  letter-spacing: -0.03em;
+  line-height: 1.02;
+  background: linear-gradient(92deg, var(--ember-1), var(--ember-2));
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+.stone-welcome .lead {
+  margin: 18px auto 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: var(--cream);
+}
+
+.stone-welcome .tagline {
+  margin: 10px auto 0;
+  max-width: 46ch;
+  font-size: 16px;
+  line-height: 1.6;
+  color: var(--cream-dim);
+}
+
+.stone-welcome .links {
+  margin-top: 34px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 12px;
+  justify-content: center;
+}
+
+.stone-welcome .links a,
+.stone-welcome .links .edit {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 11px 18px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--cream);
+  font-size: 14px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: border-color 0.2s, transform 0.2s, background 0.2s;
+}
+
+.stone-welcome .links a:hover {
+  transform: translateY(-2px);
+  border-color: rgba(255, 90, 31, 0.6);
+  background: rgba(255, 90, 31, 0.08);
+}
+
+.stone-welcome .links .edit {
+  font-family: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;
+  color: var(--cream-dim);
+}
+.stone-welcome .links .edit b { color: var(--ember-1); font-weight: 700; }
+
+.stone-welcome .brand {
+  position: relative;
+  z-index: 1;
+  margin-top: 56px;
+  font-size: 13px;
+  letter-spacing: 0.02em;
+  color: var(--cream-dim);
+}
+.stone-welcome .brand .dot { color: var(--ember-2); }
+
+@keyframes rise {
+  from { opacity: 0; transform: translateY(14px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .stone-welcome .hero { animation: none; }
+}
+
+/* The task list. */
+.stone-welcome .tasks {
+  margin: 26px 0 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: left;
+}
+
+.stone-welcome .task a {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 13px 16px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--cream);
+  font-size: 16px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.stone-welcome .task a:hover {
+  border-color: rgba(255, 90, 31, 0.6);
+  background: rgba(255, 90, 31, 0.08);
+}
+
+.stone-welcome .task .box {
+  color: var(--ember-2);
+  font-size: 13px;
+}
+
+.stone-welcome .task.done a {
+  color: var(--cream-dim);
+}
+
+.stone-welcome .task.done .box {
+  color: var(--cream-dim);
+}
+
+.stone-welcome .brand b {
+  color: var(--ember-1);
+  font-weight: 700;
+}

package/monorepo-declarative/apps/web/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@acme/web",
+  "private": true,
+  "version": "1.0.0",
+  "description": "The web application: the shared domain, served in a browser.",
+  "license": "MIT",
+  "type": "module",
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "scripts": {
+    "dev": "stone dev",
+    "build": "stone build",
+    "preview": "stone preview",
+    "build:ssr": "stone build --ssr",
+    "test": "stone test",
+    "test:cvg": "stone test --coverage"
+  },
+  "dependencies": {
+    "@acme/domain": "workspace:*",
+    "@stone-js/browser-adapter": "^0.8.13",
+    "@stone-js/core": "^0.8.13",
+    "@stone-js/router": "^0.8.13",
+    "@stone-js/use-react": "^0.8.13",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-decorators": "^7.25.9",
+    "@babel/preset-env": "^7.26.9",
+    "@babel/preset-typescript": "^7.27.0",
+    "@stone-js/cli": "^0.8.13",
+    "@stone-js/testing": "^0.8.13",
+    "@types/node": "^24.0.7",
+    "@types/react": "^19.0.7",
+    "@types/react-dom": "^19.0.3",
+    "@vitest/coverage-v8": "^3.0.9",
+    "vitest": "^3.0.9"
+  }
+}

package/monorepo-declarative/apps/web/public/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/monorepo-declarative/apps/web/public/logo.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" width="96" height="96" role="img" aria-label="Stone.js">
+  <title>Stone.js</title>
+  <style>
+    .ink { stroke: #1B1613; }
+    @media (prefers-color-scheme: dark) { .ink { stroke: #EFE8DC; } }
+  </style>
+  <defs>
+    <linearGradient id="braise" gradientUnits="userSpaceOnUse" x1="22" y1="14" x2="74" y2="26.1">
+      <stop offset="0" stop-color="#FFC46B" />
+      <stop offset="1" stop-color="#FF5A1F" />
+    </linearGradient>
+  </defs>
+  <path class="ink" d="M 79.96 36.4 A 34 34 0 0 1 53.9 81.5" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path class="ink" d="M 42.1 81.5 A 34 34 0 0 1 16.05 36.4" fill="none" stroke-width="11" stroke-linecap="round" opacity=".85" />
+  <path d="M 22 26.1 A 34 34 0 0 1 74 26.1" fill="none" stroke="url(#braise)" stroke-width="11" stroke-linecap="round" />
+</svg>

package/monorepo-declarative/apps/web/tests/TaskListPage.spec.ts

@@ -0,0 +1,37 @@
+import { createTestApp, makeIncomingHttpEvent } from '@stone-js/testing'
+
+/**
+ * The web application, booted in memory and asked a real question.
+ *
+ * Nothing is mocked and nothing is listed: `createTestApp()` discovers `app/**`, and the event goes
+ * through the same kernel production runs, shared domain included.
+ *
+ * Read this next to `apps/mobile/tests/TaskListScreen.spec.ts`. Same domain, same assertions about
+ * what it resolved; what differs is only how each platform delivers the result.
+ */
+describe('TaskListPage', () => {
+  it('renders the task list from the shared domain', async () => {
+    const app = await createTestApp()
+
+    const response = await app.send(makeIncomingHttpEvent({ method: 'GET', url: '/' }))
+
+    expect(response.statusCode).toBe(200)
+    expect(response.html()).toContain('Run the same code on a phone')
+    expect(response.html()).toContain('Acme tasks')
+  })
+
+  it('toggles a task through the domain, and says how many are left', async () => {
+    const app = await createTestApp()
+
+    // Asserted through the head rather than the body: React's server renderer splits the text
+    // around `{data.remaining}` into separate nodes, so the body reads `1<!-- --> left to do`.
+    // `head` builds one string, which is also what a browser tab and a navigator show.
+    const before = await app.send(makeIncomingHttpEvent({ method: 'GET', url: '/' }))
+    expect(before.html()).toContain('<title>1 left · Acme tasks</title>')
+
+    const after = await app.send(makeIncomingHttpEvent({ method: 'GET', url: '/?toggle=3' }))
+
+    expect(after.statusCode).toBe(200)
+    expect(after.html()).toContain('<title>0 left · Acme tasks</title>')
+  })
+})