create-reactra 0.1.0-alpha.0

package/index.mjs

@@ -0,0 +1,144 @@
+#!/usr/bin/env node
+// create-reactra — scaffolds a new Reactra app from npm-published @reactra/* packages.
+// Dependency-free (Node built-ins only) so `npm create reactra@latest` needs nothing
+// but Node. Per plan/alpha-publish-and-docs-plan.md §10.
+//
+//   npm create reactra@latest my-app
+//   npm create reactra@latest my-app -- --template starter --yes
+
+import { cpSync, existsSync, mkdirSync, readdirSync, readFileSync, renameSync, writeFileSync } from "node:fs"
+import { join, dirname, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+import { createInterface } from "node:readline/promises"
+import { stdin, stdout, argv, env, exit } from "node:process"
+import { execSync } from "node:child_process"
+
+const here = dirname(fileURLToPath(import.meta.url))
+const TEMPLATES = join(here, "templates")
+const VERSIONS = JSON.parse(readFileSync(join(TEMPLATES, "versions.json"), "utf8"))
+
+/** Parse argv: positional name + --flags. */
+const parseArgs = (args) => {
+  const out = { name: undefined, template: undefined, yes: false, git: true, force: false, install: false }
+  for (let i = 0; i < args.length; i++) {
+    const a = args[i]
+    if (a === "--yes" || a === "-y") out.yes = true
+    else if (a === "--no-git") out.git = false
+    else if (a === "--force" || a === "-f") out.force = true
+    else if (a === "--install") out.install = true
+    else if (a === "--template" || a === "-t") out.template = args[++i]
+    else if (a.startsWith("--template=")) out.template = a.slice("--template=".length)
+    else if (!a.startsWith("-") && !out.name) out.name = a
+  }
+  return out
+}
+
+const TEMPLATE_CHOICES = ["starter", "todo"]
+const isValidName = (n) => /^[a-z0-9][a-z0-9._-]*$/i.test(n)
+
+/** Detect the invoking package manager from npm_config_user_agent. */
+const detectPM = () => {
+  const ua = env.npm_config_user_agent ?? ""
+  if (ua.startsWith("pnpm")) return "pnpm"
+  if (ua.startsWith("yarn")) return "yarn"
+  if (ua.startsWith("bun")) return "bun"
+  return "npm"
+}
+
+/** Recursively copy a template dir, substituting tokens in text files. */
+const copyTemplate = (src, dest, tokens) => {
+  for (const entry of readdirSync(src, { withFileTypes: true })) {
+    const from = join(src, entry.name)
+    // _gitignore → .gitignore (npm strips real dotfiles from published tarballs).
+    const name = entry.name === "_gitignore" ? ".gitignore" : entry.name
+    const to = join(dest, name)
+    if (entry.isDirectory()) {
+      mkdirSync(to, { recursive: true })
+      copyTemplate(from, to, tokens)
+    } else {
+      let content = readFileSync(from, "utf8")
+      for (const [k, v] of Object.entries(tokens)) content = content.replaceAll(k, v)
+      writeFileSync(to, content)
+    }
+  }
+}
+
+const main = async () => {
+  const opts = parseArgs(argv.slice(2))
+  const interactive = stdin.isTTY && !opts.yes
+
+  let name = opts.name
+  let template = opts.template
+
+  if (interactive) {
+    const rl = createInterface({ input: stdin, output: stdout })
+    if (!name) {
+      const ans = (await rl.question("Project name: (my-reactra-app) ")).trim()
+      name = ans || "my-reactra-app"
+    }
+    if (!template) {
+      const ans = (await rl.question("Template — starter / todo: (starter) ")).trim()
+      template = ans || "starter"
+    }
+    rl.close()
+  }
+
+  name = name || "my-reactra-app"
+  template = template || "starter"
+
+  if (!isValidName(name)) {
+    console.error(`✗ "${name}" is not a valid project name (use letters, digits, - . _).`)
+    exit(1)
+  }
+  if (!TEMPLATE_CHOICES.includes(template)) {
+    console.error(`✗ Unknown template "${template}". Choose one of: ${TEMPLATE_CHOICES.join(", ")}.`)
+    exit(1)
+  }
+
+  const templateDir = join(TEMPLATES, template)
+  if (!existsSync(templateDir)) {
+    console.error(`✗ Template "${template}" is not available in this release.`)
+    exit(1)
+  }
+
+  const targetDir = resolve(process.cwd(), name)
+  if (existsSync(targetDir) && readdirSync(targetDir).length > 0 && !opts.force) {
+    console.error(`✗ Directory "${name}" already exists and is not empty. Use --force to overwrite.`)
+    exit(1)
+  }
+
+  mkdirSync(targetDir, { recursive: true })
+  copyTemplate(templateDir, targetDir, {
+    __PROJECT_NAME__: name,
+    __REACTRA_VERSION__: VERSIONS.reactra,
+  })
+
+  if (opts.git) {
+    try {
+      execSync("git init -q", { cwd: targetDir, stdio: "ignore" })
+    } catch {
+      // git not available — not fatal.
+    }
+  }
+
+  const pm = detectPM()
+  const installCmd = pm === "yarn" ? "yarn" : `${pm} install`
+  const devCmd = pm === "npm" ? "npm run dev" : `${pm} dev`
+
+  if (opts.install) {
+    console.log(`\nInstalling dependencies with ${pm}…`)
+    execSync(installCmd, { cwd: targetDir, stdio: "inherit" })
+  }
+
+  console.log(`\n✓ Created ${name} (${template} template, @reactra ${VERSIONS.reactra})\n`)
+  console.log("Next steps:")
+  console.log(`  cd ${name}`)
+  if (!opts.install) console.log(`  ${installCmd}`)
+  console.log(`  ${devCmd}\n`)
+  console.log("Docs: https://reactra.dev\n")
+}
+
+main().catch((e) => {
+  console.error(e instanceof Error ? e.message : String(e))
+  exit(1)
+})

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "create-reactra",
+  "version": "0.1.0-alpha.0",
+  "description": "Scaffold a new Reactra app — a compiler-first, React-19-compatible framework.",
+  "type": "module",
+  "bin": {
+    "create-reactra": "index.mjs"
+  },
+  "files": [
+    "index.mjs",
+    "templates"
+  ],
+  "engines": {
+    "node": ">=22.18"
+  },
+  "keywords": ["reactra", "react", "scaffold", "create", "starter", "template"],
+  "publishConfig": {
+    "access": "public",
+    "tag": "alpha",
+    "provenance": false
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/akhilshastri/reactra.git",
+    "directory": "packages/create-reactra"
+  },
+  "homepage": "https://reactra-docs.vercel.app",
+  "license": "MIT"
+}

package/templates/starter/README.md

@@ -0,0 +1,48 @@
+# __PROJECT_NAME__
+
+A [Reactra](https://reactra.dev) app — a compiler-first, React-19-compatible framework.
+
+## Run
+
+```bash
+npm install
+npm run dev
+```
+
+Open the printed URL (default `http://localhost:5173`). Edit `src/pages/index.tsx`
+and save — the page hot-reloads.
+
+## Project layout
+
+```
+src/
+├── main.tsx                    # boots the router, mounts <RouteRenderer>
+├── routeManifest.generated.ts  # generated — do not edit
+└── pages/
+    ├── index.tsx               # → /   (a Reactra DSL component)
+    ├── _layout.tsx             # wraps every page
+    ├── _loading.tsx            # shown while a route loads
+    └── _error.tsx              # route error boundary
+```
+
+## Add a page
+
+Drop a file under `src/pages` — its path is its route:
+
+- `src/pages/about.tsx` → `/about`
+- `src/pages/users/[id].tsx` → `/users/:id` (with a typed `param id`)
+
+`@reactra/vite-plugin` regenerates the route manifest automatically.
+
+## Learn more
+
+- [Documentation](https://reactra.dev)
+- [Your first page](https://reactra.dev/getting-started/first-page/)
+- [The DSL guide](https://reactra.dev/guide/components-and-view/)
+
+## Build
+
+```bash
+npm run build      # production build → dist/
+npm run preview    # serve the built output
+```

package/templates/starter/_gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+*.log
+
+# Regenerated by @reactra/vite-plugin on every src/pages change. A placeholder is
+# committed so a fresh clone type-checks before `vite dev` has run once.
+src/routeManifest.generated.ts
+src/router-middleware.generated.ts
+.reactra

package/templates/starter/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/starter/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reactra/router": "__REACTRA_VERSION__",
+    "@reactra/store": "__REACTRA_VERSION__",
+    "@reactra/service": "__REACTRA_VERSION__",
+    "@reactra/resource": "__REACTRA_VERSION__",
+    "@reactra/behaviours": "__REACTRA_VERSION__",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@reactra/vite-plugin": "__REACTRA_VERSION__",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.0.0"
+  }
+}

package/templates/starter/src/main.tsx

@@ -0,0 +1,16 @@
+// Browser entry point — boots the router and mounts the app.
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { configureRouter, RouteRenderer } from "@reactra/router"
+import { ROUTES } from "./routeManifest.generated"
+
+configureRouter({ mode: "history", routes: ROUTES })
+
+const rootEl = document.getElementById("root")
+if (!rootEl) throw new Error("#root element missing from index.html")
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <RouteRenderer />
+  </StrictMode>,
+)

package/templates/starter/src/pages/_error.tsx

@@ -0,0 +1,19 @@
+// Error boundary — shown when a route throws while rendering. Receives the thrown
+// `error` plus a `reset` callback that clears it so the children re-render.
+interface RouteErrorProps {
+  error: unknown
+  reset: () => void
+}
+
+const RouteError = ({ error, reset }: RouteErrorProps): import("react").JSX.Element => {
+  const message = error instanceof Error ? error.message : String(error)
+  return (
+    <div style={{ padding: "1rem", color: "#b3261e" }}>
+      <h2>Something went wrong</h2>
+      <p>{message}</p>
+      <button type="button" onClick={reset}>Try again</button>
+    </div>
+  )
+}
+
+export default RouteError

package/templates/starter/src/pages/_layout.tsx

@@ -0,0 +1,11 @@
+// Root layout — the chrome that wraps every route. Persists across navigation,
+// so anything here (a header, nav) stays mounted while pages swap. Plain React.
+interface RootLayoutProps {
+  children?: import("react").ReactNode
+}
+
+const RootLayout = ({ children }: RootLayoutProps): import("react").JSX.Element => (
+  <div>{children}</div>
+)
+
+export default RootLayout

package/templates/starter/src/pages/_loading.tsx

@@ -0,0 +1,7 @@
+// Loading fallback — shown while a route's code-split chunk is loading (the
+// router wires this up as the Suspense fallback for routes at this level).
+const RouteLoading = (): import("react").JSX.Element => (
+  <div style={{ padding: "1rem", color: "#6b7d73", fontStyle: "italic" }}>loading…</div>
+)
+
+export default RouteLoading

package/templates/starter/src/pages/index.module.css

@@ -0,0 +1,44 @@
+.app {
+  max-width: 40rem;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1a2b22;
+}
+
+.app h1 {
+  font-size: 2rem;
+  margin: 0 0 0.5rem;
+}
+
+.muted {
+  color: #4a6256;
+  font-size: 1.1rem;
+}
+
+.button {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1.1rem;
+  font-size: 1rem;
+  color: #fff;
+  background: #137a41;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: #0f6536;
+}
+
+.hint {
+  margin-top: 2rem;
+  color: #6b7d73;
+  font-size: 0.9rem;
+}
+
+.hint code {
+  background: #e7f0ea;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.3rem;
+}

package/templates/starter/src/pages/index.tsx

@@ -0,0 +1,20 @@
+import styles from "./index.module.css"
+
+export component HomePage {
+  meta { title: "__PROJECT_NAME__" }
+
+  state count: number = 0
+  derived label = count === 1 ? "1 click" : `${count} clicks`
+  action inc() { count = count + 1 }
+
+  view {
+    <main className={styles.app}>
+      <h1>Welcome to Reactra</h1>
+      <p className={styles.muted}>{label}</p>
+      <button type="button" className={styles.button} onClick={inc}>click me</button>
+      <p className={styles.hint}>
+        Edit <code>src/pages/index.tsx</code> and save — the page hot-reloads.
+      </p>
+    </main>
+  }
+}

package/templates/starter/src/routeManifest.generated.ts

@@ -0,0 +1,6 @@
+// routeManifest.generated.ts — DO NOT EDIT.
+// Regenerated by @reactra/vite-plugin on every src/pages change. This committed
+// placeholder lets a fresh clone type-check before `vite dev` has run once.
+import type { RouteConfig } from "@reactra/router"
+
+export const ROUTES: RouteConfig[] = []

package/templates/starter/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+// Ambient type for CSS modules so `import styles from "./x.module.css"` type-checks.
+declare module "*.module.css" {
+  const classes: Readonly<Record<string, string>>
+  export default classes
+}

package/templates/starter/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*", "vite.config.ts"]
+}

package/templates/starter/vite.config.ts

@@ -0,0 +1,9 @@
+// Plugin order is load-bearing: @reactra/vite-plugin runs at enforce:"pre" so it
+// transforms Reactra DSL → React-19 TSX before @vitejs/plugin-react transforms it.
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import reactra from "@reactra/vite-plugin"
+
+export default defineConfig({
+  plugins: [reactra(), react()],
+})

package/templates/todo/README.md

@@ -0,0 +1,48 @@
+# __PROJECT_NAME__
+
+A [Reactra](https://reactra.dev) app — a compiler-first, React-19-compatible framework.
+
+## Run
+
+```bash
+npm install
+npm run dev
+```
+
+Open the printed URL (default `http://localhost:5173`). Edit `src/pages/index.tsx`
+and save — the page hot-reloads.
+
+## Project layout
+
+```
+src/
+├── main.tsx                    # boots the router, mounts <RouteRenderer>
+├── routeManifest.generated.ts  # generated — do not edit
+└── pages/
+    ├── index.tsx               # → /   (a Reactra DSL component)
+    ├── _layout.tsx             # wraps every page
+    ├── _loading.tsx            # shown while a route loads
+    └── _error.tsx              # route error boundary
+```
+
+## Add a page
+
+Drop a file under `src/pages` — its path is its route:
+
+- `src/pages/about.tsx` → `/about`
+- `src/pages/users/[id].tsx` → `/users/:id` (with a typed `param id`)
+
+`@reactra/vite-plugin` regenerates the route manifest automatically.
+
+## Learn more
+
+- [Documentation](https://reactra.dev)
+- [Your first page](https://reactra.dev/getting-started/first-page/)
+- [The DSL guide](https://reactra.dev/guide/components-and-view/)
+
+## Build
+
+```bash
+npm run build      # production build → dist/
+npm run preview    # serve the built output
+```

package/templates/todo/_gitignore

@@ -0,0 +1,9 @@
+node_modules
+dist
+*.log
+
+# Regenerated by @reactra/vite-plugin on every src/pages change. A placeholder is
+# committed so a fresh clone type-checks before `vite dev` has run once.
+src/routeManifest.generated.ts
+src/router-middleware.generated.ts
+.reactra

package/templates/todo/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>__PROJECT_NAME__</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/todo/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "__PROJECT_NAME__",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@reactra/router": "__REACTRA_VERSION__",
+    "@reactra/store": "__REACTRA_VERSION__",
+    "@reactra/service": "__REACTRA_VERSION__",
+    "@reactra/resource": "__REACTRA_VERSION__",
+    "@reactra/behaviours": "__REACTRA_VERSION__",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@reactra/vite-plugin": "__REACTRA_VERSION__",
+    "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "typescript": "^5.7.0",
+    "vite": "^7.0.0"
+  }
+}

package/templates/todo/src/main.tsx

@@ -0,0 +1,20 @@
+// Browser entry point — boots the stores + router and mounts the app.
+// Sequence matters: configureStores precedes configureRouter so every store
+// factory is registered before the first route renders.
+import { StrictMode } from "react"
+import { createRoot } from "react-dom/client"
+import { configureStores } from "@reactra/store"
+import { configureRouter, RouteRenderer } from "@reactra/router"
+import { ROUTES, STORES } from "./routeManifest.generated"
+
+configureStores({ stores: STORES })
+configureRouter({ mode: "history", routes: ROUTES })
+
+const rootEl = document.getElementById("root")
+if (!rootEl) throw new Error("#root element missing from index.html")
+
+createRoot(rootEl).render(
+  <StrictMode>
+    <RouteRenderer />
+  </StrictMode>,
+)

package/templates/todo/src/pages/_error.tsx

@@ -0,0 +1,19 @@
+// Error boundary — shown when a route throws while rendering. Receives the thrown
+// `error` plus a `reset` callback that clears it so the children re-render.
+interface RouteErrorProps {
+  error: unknown
+  reset: () => void
+}
+
+const RouteError = ({ error, reset }: RouteErrorProps): import("react").JSX.Element => {
+  const message = error instanceof Error ? error.message : String(error)
+  return (
+    <div style={{ padding: "1rem", color: "#b3261e" }}>
+      <h2>Something went wrong</h2>
+      <p>{message}</p>
+      <button type="button" onClick={reset}>Try again</button>
+    </div>
+  )
+}
+
+export default RouteError

package/templates/todo/src/pages/_layout.tsx

@@ -0,0 +1,11 @@
+// Root layout — the chrome that wraps every route. Persists across navigation,
+// so anything here (a header, nav) stays mounted while pages swap. Plain React.
+interface RootLayoutProps {
+  children?: import("react").ReactNode
+}
+
+const RootLayout = ({ children }: RootLayoutProps): import("react").JSX.Element => (
+  <div>{children}</div>
+)
+
+export default RootLayout

package/templates/todo/src/pages/_loading.tsx

@@ -0,0 +1,7 @@
+// Loading fallback — shown while a route's code-split chunk is loading (the
+// router wires this up as the Suspense fallback for routes at this level).
+const RouteLoading = (): import("react").JSX.Element => (
+  <div style={{ padding: "1rem", color: "#6b7d73", fontStyle: "italic" }}>loading…</div>
+)
+
+export default RouteLoading

package/templates/todo/src/pages/index.module.css

@@ -0,0 +1,93 @@
+.app {
+  max-width: 40rem;
+  margin: 4rem auto;
+  padding: 0 1.5rem;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+  color: #1a2b22;
+}
+
+.app h1 {
+  font-size: 2rem;
+  margin: 0 0 0.5rem;
+}
+
+.muted {
+  color: #4a6256;
+  font-size: 1.1rem;
+}
+
+.button {
+  margin-top: 0.5rem;
+  padding: 0.5rem 1.1rem;
+  font-size: 1rem;
+  color: #fff;
+  background: #137a41;
+  border: none;
+  border-radius: 0.5rem;
+  cursor: pointer;
+}
+
+.button:hover {
+  background: #0f6536;
+}
+
+.hint {
+  margin-top: 2rem;
+  color: #6b7d73;
+  font-size: 0.9rem;
+}
+
+.hint code {
+  background: #e7f0ea;
+  padding: 0.1rem 0.35rem;
+  border-radius: 0.3rem;
+}
+
+.row {
+  display: flex;
+  gap: 0.5rem;
+  margin: 1rem 0;
+}
+
+.input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  font-size: 1rem;
+  border: 1px solid #c3d3c9;
+  border-radius: 0.5rem;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid #eef3f0;
+}
+
+.item label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+}
+
+.done {
+  color: #9aa8a0;
+  text-decoration: line-through;
+}
+
+.remove {
+  background: none;
+  border: none;
+  color: #b3261e;
+  font-size: 1.2rem;
+  cursor: pointer;
+  line-height: 1;
+}

package/templates/todo/src/pages/index.tsx

@@ -0,0 +1,50 @@
+import styles from "./index.module.css"
+// The store name is bound by an `import type` — the compiler resolves
+// `inject store todoStore` to this declaration.
+import type { todoStore } from "../stores/todoStore"
+
+export component HomePage {
+  meta { title: "__PROJECT_NAME__" }
+
+  // Bare `inject store` subscribes this component to the store (per-field).
+  inject store todoStore
+
+  state draft: string = ""
+
+  action add() {
+    const text = draft.trim()
+    if (text) {
+      todoStore.add(text)
+      draft = ""
+    }
+  }
+
+  view {
+    <main className={styles.app}>
+      <h1>Todos</h1>
+      <p className={styles.muted}>{todoStore.remaining} remaining</p>
+
+      <form className={styles.row} onSubmit={e => { e.preventDefault(); add() }}>
+        <input
+          className={styles.input}
+          value={draft}
+          placeholder="What needs doing?"
+          onInput={e => { draft = (e.target as HTMLInputElement).value }}
+        />
+        <button type="submit" className={styles.button}>add</button>
+      </form>
+
+      <ul className={styles.list}>
+        {todoStore.items.map(t => (
+          <li key={t.id} className={styles.item}>
+            <label className={t.done ? styles.done : ""}>
+              <input type="checkbox" checked={t.done} onChange={() => todoStore.toggle(t.id)} />
+              {t.text}
+            </label>
+            <button type="button" className={styles.remove} onClick={() => todoStore.remove(t.id)}>×</button>
+          </li>
+        ))}
+      </ul>
+    </main>
+  }
+}

package/templates/todo/src/routeManifest.generated.ts

@@ -0,0 +1,8 @@
+// routeManifest.generated.ts — DO NOT EDIT.
+// Regenerated by @reactra/vite-plugin on every src/pages or store change. This
+// committed placeholder lets a fresh clone type-check before `vite dev` has run.
+import type { RouteConfig } from "@reactra/router"
+import type { StoreBinding } from "@reactra/store"
+
+export const ROUTES: RouteConfig[] = []
+export const STORES: StoreBinding[] = []

package/templates/todo/src/stores/todoStore.tsx

@@ -0,0 +1,19 @@
+// A session store — shared state that outlives a single component and persists
+// across route navigation (for the lifetime of the browser session).
+export session store todoStore {
+  state items: { id: number; text: string; done: boolean }[] = []
+  state nextId: number = 1
+
+  derived remaining = items.filter(t => !t.done).length
+
+  action add(text: string) {
+    items = [...items, { id: nextId, text, done: false }]
+    nextId = nextId + 1
+  }
+  action toggle(id: number) {
+    items = items.map(t => (t.id === id ? { ...t, done: !t.done } : t))
+  }
+  action remove(id: number) {
+    items = items.filter(t => t.id !== id)
+  }
+}

package/templates/todo/src/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+// Ambient type for CSS modules so `import styles from "./x.module.css"` type-checks.
+declare module "*.module.css" {
+  const classes: Readonly<Record<string, string>>
+  export default classes
+}

package/templates/todo/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  },
+  "include": ["src/**/*", "vite.config.ts"]
+}

package/templates/todo/vite.config.ts

@@ -0,0 +1,9 @@
+// Plugin order is load-bearing: @reactra/vite-plugin runs at enforce:"pre" so it
+// transforms Reactra DSL → React-19 TSX before @vitejs/plugin-react transforms it.
+import { defineConfig } from "vite"
+import react from "@vitejs/plugin-react"
+import reactra from "@reactra/vite-plugin"
+
+export default defineConfig({
+  plugins: [reactra(), react()],
+})

package/templates/versions.json

@@ -0,0 +1,3 @@
+{
+  "reactra": "0.1.0-alpha.0"
+}