@askrjs/cli 0.0.2

package/templates/ssg/tests/ssg-config.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from 'vite-plus/test';
+import { staticConfig } from '../ssg.config';
+
+describe('SSG config', () => {
+  it('keeps the sample route tree explicit', () => {
+    expect(staticConfig.registry.manifest.records.map((route) => route.path).sort()).toEqual(
+      ['/', '/content', '/preview', '/workflow'].sort()
+    );
+    expect(staticConfig.registry.routes).toHaveLength(4);
+  });
+});

package/templates/ssg/tsconfig.json

@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "jsxImportSource": "@askrjs/askr"
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/ssg/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["ssg.config.ts", "vite.config.ts", "vitest.config.ts"]
+}

package/templates/ssg/vite.config.ts

@@ -0,0 +1,24 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  lint: {
+    ignorePatterns: ['dist/**', 'node_modules/**', 'coverage/**'],
+  },
+  fmt: {
+    semi: true,
+    singleQuote: true,
+    trailingComma: 'es5',
+    printWidth: 80,
+    tabWidth: 2,
+  },
+  server: {
+    port: 5173,
+    open: true,
+  },
+  build: {
+    outDir: 'dist',
+    sourcemap: true,
+  },
+});

package/templates/ssg/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vite-plus';
+import { askr } from '@askrjs/vite';
+
+export default defineConfig({
+  plugins: [askr()],
+  esbuild: {
+    jsx: 'automatic',
+    jsxImportSource: '@askrjs/askr',
+  },
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    coverage: {
+      reporter: ['text', 'json', 'html'],
+    },
+  },
+});

package/templates/ssr/AGENTS.md

@@ -0,0 +1,28 @@
+# {{appName}}
+
+This is a strict TypeScript, ESM-only Askr SSR application.
+
+## Architecture
+
+- `src/routes.tsx` owns the shared `createRouteRegistry()` result.
+- `src/entry-server.tsx` exports a composed `ServerApp` using `@askrjs/server/askr`.
+- `index.html` is the only document source and contains exactly one `<!--askr-head-->` marker and one `<!--askr-app-->` marker.
+- `@askrjs/vite/server` owns development and production document composition.
+- `server.ts` only starts the production app through `@askrjs/node`.
+- `src/main.tsx` hydrates server HTML or starts the SPA when no fragment is present.
+
+Do not add Express, a `render(url)` convention, inline document markup, or manual marker replacement to application code.
+
+## Commands
+
+```bash
+npm run dev
+npm run build
+npm run preview
+npm test
+npm run typecheck
+npm run lint
+npm run fmt
+```
+
+Use askr-ui primitives for interactive controls, `--ak-*` theme tokens for styling, and preserve the shared server/browser route registry.

package/templates/ssr/README.md

@@ -0,0 +1,38 @@
+# {{appName}}
+
+An Askr application with server rendering, browser hydration, and a Node production adapter.
+
+## Commands
+
+```bash
+npm install
+npm run dev
+npm run build
+npm run preview
+npm test
+```
+
+## Rendering model
+
+`src/routes.tsx` exports one route registry shared by the browser and server. The server entry composes `createServerApp()` with `createAskrPageHandler()`, which returns an Askr HTML fragment plus normalized document metadata. The Vite server integration preserves static head content, injects Askr-owned metadata at the single `<!--askr-head-->` marker, and inserts the fragment at the single `<!--askr-app-->` marker.
+
+In development, Vite reloads the server entry and document for each HTML request. The production build emits a document-composing server app; `server.ts` only adapts that Web `ServerApp` to Node transport.
+
+API responses and other non-fragment responses pass through without document composition.
+
+## Structure
+
+```text
+index.html            document source and sole askr-head and askr-app markers
+server.ts             production Node launcher
+src/
+  main.tsx            browser hydration
+  entry-server.tsx    composed ServerApp
+  routes.tsx          shared route registry
+  app.tsx             root layout
+  pages/               route components
+  components/          reusable components
+  resources/           data resources
+```
+
+The application source does not construct document markup or expose a `render(url)` callback. Document ownership stays in `index.html` and `@askrjs/vite/server`.

package/templates/ssr/gitignore.template

@@ -0,0 +1,16 @@
+node_modules/
+dist/
+build/
+.env.local
+.env.*.local
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+.DS_Store
+Thumbs.db
+.vscode/
+.idea/
+*.swp
+*.swo
+*~

package/templates/ssr/index.html

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

package/templates/ssr/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "{{appName}}",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vp dev",
+    "build": "vp build && vp build --ssr server.ts --outDir dist/server",
+    "preview": "node dist/server/server.js",
+    "test": "vp test run",
+    "typecheck": "tsc --noEmit",
+    "lint": "vp lint src server.ts tests vite.config.ts",
+    "lint:fix": "npm run lint -- --fix",
+    "fmt": "vp fmt \"src/**/*.{ts,tsx,css}\" \"server.ts\" \"tests/**/*.{ts,tsx}\" \"*.md\"",
+    "check": "npm run lint && npm run typecheck && npm test && npm run build"
+  },
+  "dependencies": {
+    "@askrjs/askr": ">=0.0.53 <0.1.0",
+    "@askrjs/node": ">=0.0.1 <0.1.0",
+    "@askrjs/server": ">=0.0.1 <0.1.0",
+    "@askrjs/themes": ">=0.0.12 <0.1.0",
+    "@askrjs/ui": ">=0.0.13 <0.1.0"
+  },
+  "devDependencies": {
+    "@askrjs/vite": ">=0.0.6 <0.1.0",
+    "@types/node": "^26.0.0",
+    "jsdom": "^29.1.1",
+    "tsx": "^4.23.1",
+    "typescript": "^6.0.3",
+    "vite-plus": "^0.2.4"
+  },
+  "engines": {
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}

package/templates/ssr/server.ts

@@ -0,0 +1,16 @@
+import { listen } from '@askrjs/node';
+import app from 'virtual:askr-server';
+
+const port = Number(process.env.PORT ?? 3000);
+const server = await listen(app, {
+  host: process.env.HOST ?? '127.0.0.1',
+  port,
+});
+const address = server.address();
+const boundPort = typeof address === 'object' && address ? address.port : port;
+
+console.log(`Server started at http://127.0.0.1:${boundPort}`);
+
+const shutdown = () => server.close();
+process.once('SIGINT', shutdown);
+process.once('SIGTERM', shutdown);

package/templates/ssr/src/app.tsx

@@ -0,0 +1,21 @@
+import './styles.css';
+import { Link } from '@askrjs/askr/router';
+
+export default function App({ children }: { children?: unknown }) {
+  return (
+    <div>
+      <header>
+        <nav>
+          <Link href="/">
+            <strong>{'{{appName}}'}</strong>
+          </Link>
+          <div class="nav-links">
+            <Link href="/example">Example</Link>
+            <Link href="/about">About</Link>
+          </div>
+        </nav>
+      </header>
+      <main>{children}</main>
+    </div>
+  );
+}

package/templates/ssr/src/components/counter.tsx

@@ -0,0 +1,26 @@
+import { state, derive } from '@askrjs/askr';
+import { Button } from '@askrjs/ui/button';
+
+export default function Counter() {
+  const [count, setCount] = state(0);
+  const parity = derive(() => (count() % 2 === 0 ? 'even' : 'odd'));
+
+  return (
+    <div class="counter">
+      <h2>Interactive Counter</h2>
+      <p class="text-muted">
+        Built with <code>state()</code> and <code>derive()</code>
+      </p>
+      <div class="counter-value">{count()}</div>
+      <div>
+        <span class="badge">{parity()}</span>
+      </div>
+      <div class="counter-controls">
+        <Button onPress={() => setCount((c) => Math.max(0, c - 1))}>
+          - Decrement
+        </Button>
+        <Button onPress={() => setCount((c) => c + 1)}>+ Increment</Button>
+      </div>
+    </div>
+  );
+}

package/templates/ssr/src/entry-server.tsx

@@ -0,0 +1,10 @@
+import { createServerApp } from '@askrjs/server';
+import { createAskrPageHandler } from '@askrjs/server/askr';
+import { pageRegistry } from './routes';
+
+const app = createServerApp({
+  fallback: createAskrPageHandler({ registry: pageRegistry }),
+});
+
+export { app };
+export default app;

package/templates/ssr/src/main.tsx

@@ -0,0 +1,11 @@
+import { createSPA, hydrateSPA } from '@askrjs/askr/boot';
+import { pageRegistry } from './routes';
+
+const root = document.getElementById('app');
+if (!root) throw new Error('Missing #app root element.');
+
+if (root.hasChildNodes()) {
+  await hydrateSPA({ root, registry: pageRegistry });
+} else {
+  await createSPA({ root, registry: pageRegistry });
+}

package/templates/ssr/src/pages/about.tsx

@@ -0,0 +1,75 @@
+export default function About() {
+  return (
+    <>
+      <h1>About Askr</h1>
+      <p class="text-muted">
+        A modern reactive framework for building fast, maintainable web
+        applications.
+      </p>
+
+      <section class="section">
+        <h2>Why Askr Exists</h2>
+        <p>
+          Modern web development has become unnecessarily complex. Frameworks
+          have grown bloated with abstractions, requiring developers to learn
+          extensive APIs and fight against the framework rather than work with
+          it.
+        </p>
+        <p>
+          Askr was created to bring simplicity back to web development. It
+          provides just enough structure to build sophisticated applications
+          while staying out of your way.
+        </p>
+      </section>
+
+      <section class="section">
+        <h2>Core Primitives</h2>
+        <div class="features">
+          <div class="feature-card">
+            <h3>Fine-grained Reactivity</h3>
+            <p>
+              <code>state()</code> for reactive values with automatic dependency
+              tracking. Updates are surgical — only the specific DOM nodes that
+              need to change are updated.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h3>Simple Async Data</h3>
+            <p>
+              <code>resource()</code> handles async data fetching with built-in
+              loading states, error handling, and automatic refetching when
+              dependencies change.
+            </p>
+          </div>
+          <div class="feature-card">
+            <h3>Declarative Routing</h3>
+            <p>
+              Routes are declared at module-load time with{' '}
+              <code>createRouteRegistry()</code>, <code>group()</code>, and{' '}
+              <code>route()</code>. Clean, type-safe, and no configuration
+              needed.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      <section class="section">
+        <h2>The Ecosystem</h2>
+        <p>
+          <strong>askr</strong> — the core framework with reactive primitives,
+          routing, SSR, and SSG support. Zero runtime dependencies.
+        </p>
+        <p>
+          <strong>askr-ui</strong> — headless, accessible UI components. Button,
+          Accordion, Dialog, and 30+ more. All interaction logic, no opinions on
+          style.
+        </p>
+        <p>
+          <strong>askr-themes</strong> — CSS-only themes that target askr-ui's{' '}
+          <code>data-slot</code> attributes. Swap themes with a single import
+          change.
+        </p>
+      </section>
+    </>
+  );
+}

package/templates/ssr/src/pages/example.tsx

@@ -0,0 +1,113 @@
+import { state } from '@askrjs/askr';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionHeader,
+  AccordionTrigger,
+  AccordionContent,
+} from '@askrjs/ui/accordion';
+import { Toggle } from '@askrjs/ui/toggle';
+import { Input } from '@askrjs/ui/input';
+import Counter from '../components/counter';
+
+export default function Example() {
+  const [name, setName] = state('');
+  const [bold, setBold] = state(false);
+
+  return (
+    <>
+      <h1>Component Showcase</h1>
+      <p class="text-muted">
+        askr-ui headless components styled by askr-themes — working together
+        out of the box.
+      </p>
+
+      <Counter />
+
+      <div class="showcase-section">
+        <h3>Reactivity</h3>
+        <p>
+          Askr uses <code>state()</code> for reactive values that automatically
+          track dependencies and update only the DOM nodes that need to change.
+        </p>
+        <p>
+          Create reactive state with{' '}
+          <code>const [count, setCount] = state(0)</code>, read with{' '}
+          <code>count()</code>, and update with{' '}
+          <code>setCount(n =&gt; n + 1)</code>.
+        </p>
+        <p>
+          Core primitives: <code>state()</code>, <code>derive()</code>,{' '}
+          <code>selector()</code>, <code>resource()</code>, and <code>For</code>
+          .
+        </p>
+      </div>
+
+      <div class="showcase-section">
+        <h3>Accordion</h3>
+        <Accordion type="single" collapsible>
+          <AccordionItem value="reactivity">
+            <AccordionHeader>
+              <AccordionTrigger>
+                What is fine-grained reactivity?
+              </AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                Fine-grained reactivity means updates are surgical. When a state
+                value changes, only the specific DOM nodes that read that value
+                are updated — no virtual DOM diffing, no component re-renders.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="ssr">
+            <AccordionHeader>
+              <AccordionTrigger>Does Askr support SSR?</AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                Yes. Askr provides <code>renderToString()</code> and{' '}
+                <code>renderToStream()</code> for server-side rendering, plus{' '}
+                <code>hydrateSPA()</code> for client hydration.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+          <AccordionItem value="themes">
+            <AccordionHeader>
+              <AccordionTrigger>How does theming work?</AccordionTrigger>
+            </AccordionHeader>
+            <AccordionContent>
+              <p>
+                askr-ui components emit <code>data-slot</code> attributes.
+                askr-themes provides CSS that targets these slots with design
+                tokens. Switch themes by changing a single CSS import.
+              </p>
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+
+      <div class="showcase-section">
+        <h3>Toggle &amp; Input</h3>
+        <p class="text-muted">
+          Reactive state driving UI updates in real time.
+        </p>
+        <div style="display: flex; align-items: center; gap: var(--ak-space-md); margin-bottom: var(--ak-space-md);">
+          <Toggle pressed={bold()} onPress={() => setBold((b) => !b)}>
+            Bold
+          </Toggle>
+          <Input
+            placeholder="Type your name..."
+            value={name()}
+            onInput={(e: Event) =>
+              setName((e.target as HTMLInputElement).value)
+            }
+          />
+        </div>
+        <p style={`font-weight: ${bold() ? '700' : '400'}`}>
+          {name() ? `Hello, ${name()}!` : 'Type something above...'}
+        </p>
+      </div>
+    </>
+  );
+}

package/templates/ssr/src/pages/home.tsx

@@ -0,0 +1,56 @@
+import { Link } from '@askrjs/askr/router';
+import { Button } from '@askrjs/ui/button';
+
+export default function Home() {
+  return (
+    <>
+      <section class="text-center section">
+        <h1>Welcome to Askr</h1>
+        <p class="text-muted">
+          A minimalist reactive framework for modern web applications.
+          Fine-grained reactivity, zero runtime dependencies, TypeScript-first.
+        </p>
+        <div class="hero-actions">
+          <Button asChild>
+            <Link href="/example">View Examples</Link>
+          </Button>
+          <Button asChild>
+            <Link href="/about">Learn More</Link>
+          </Button>
+        </div>
+      </section>
+
+      <div class="features">
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Reactive</span>
+          </h3>
+          <p>
+            <code>state()</code> and <code>derive()</code> give you fine-grained
+            reactivity. Only the DOM nodes that depend on changed values update
+            — nothing more.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Async</span>
+          </h3>
+          <p>
+            <code>resource()</code> handles data fetching with built-in loading
+            states, error handling, and automatic refetching when dependencies
+            change.
+          </p>
+        </div>
+        <div class="feature-card">
+          <h3>
+            <span class="badge">Composable</span>
+          </h3>
+          <p>
+            askr-ui provides headless components. askr-themes provides CSS
+            themes. Mix and match — or build your own.
+          </p>
+        </div>
+      </div>
+    </>
+  );
+}

package/templates/ssr/src/resources/user.ts

@@ -0,0 +1,15 @@
+import { resource } from '@askrjs/askr/resources';
+
+export function fetchUser(id: number) {
+  return resource(
+    async ({ signal }: { signal: AbortSignal }) => {
+      // Simulate API call
+      await new Promise((resolve) => setTimeout(resolve, 100));
+      if (signal.aborted) {
+        throw new DOMException('Request aborted', 'AbortError');
+      }
+      return { id, name: `User ${id}`, email: `user${id}@example.com` };
+    },
+    [id]
+  );
+}

package/templates/ssr/src/routes.tsx

@@ -0,0 +1,13 @@
+import { createRouteRegistry, group, route } from '@askrjs/askr/router';
+import AppLayout from './app';
+import Home from './pages/home';
+import About from './pages/about';
+import Example from './pages/example';
+
+export const pageRegistry = createRouteRegistry(() => {
+  group({ layout: AppLayout }, () => {
+    route('/', Home);
+    route('/about', About);
+    route('/example', Example);
+  });
+});