@askrjs/cli 0.0.2 → 0.0.4

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

@@ -1,82 +0,0 @@
-import { Link } from '@askrjs/askr/router';
-import { Button } from '@askrjs/ui';
-import {
-  ActionRow,
-  Card,
-  CardGrid,
-  SectionHeader,
-} from '../components/site-shell';
-
-const steps = [
-  {
-    number: '01',
-    title: 'Start the dev server',
-    command: 'npm run dev',
-    body: 'Vite runs the sample as a SPA while you edit, so page changes feel immediate.',
-  },
-  {
-    number: '02',
-    title: 'Edit a page',
-    command: 'src/pages/*.tsx',
-    body: 'Each page is a plain component. Keep view code, layout, and copy close together.',
-  },
-  {
-    number: '03',
-    title: 'Keep the route map explicit',
-    command: 'ssg.config.ts',
-    body: 'The static route list mirrors the pages the sample site actually ships.',
-  },
-  {
-    number: '04',
-    title: 'Generate and preview',
-    command: 'npm run generate && npm run preview',
-    body: 'Render the site to dist/static and verify the production output before you ship it.',
-  },
-];
-
-export default function Workflow() {
-  return (
-    <>
-      <SectionHeader
-        eyebrow="Workflow"
-        title="The authoring loop stays short."
-        description="This sample keeps the daily work obvious: edit a page, update the route map, generate static HTML, and preview the result."
-        actions={
-          <ActionRow>
-            <Button asChild>
-              <Link href="/content">See the route map</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/preview">Open the preview</Link>
-            </Button>
-          </ActionRow>
-        }
-      />
-
-      <CardGrid>
-        {steps.map((step) => (
-          <Card
-            eyebrow={step.number}
-            title={step.title}
-            description={step.body}
-          >
-            <p>
-              <code>{step.command}</code>
-            </p>
-          </Card>
-        ))}
-      </CardGrid>
-
-      <Card
-        title="Why this feels good"
-        description="There is no hidden router magic. The generated site and the dev server read the same route definitions, so the UI you edit is the UI you ship."
-      >
-        <p>
-          <code>npm run dev</code>, <code>npm run generate</code>, and{' '}
-          <code>npm run preview</code> are the only commands you need to
-          remember.
-        </p>
-      </Card>
-    </>
-  );
-}

package/templates/ssg/src/pages/content.tsx

@@ -1,63 +0,0 @@
-import { Link } from '@askrjs/askr/router';
-import { Button } from '@askrjs/ui';
-import {
-  ActionRow,
-  Card,
-  CardGrid,
-  SectionHeader,
-} from '../components/site-shell';
-
-const routeMap = [
-  {
-    path: '/',
-    title: 'Home',
-    note: 'Start here and link out to the rest of the sample.',
-  },
-  {
-    path: '/workflow',
-    title: 'Workflow',
-    note: 'Show the edit, generate, and preview loop.',
-  },
-  {
-    path: '/content',
-    title: 'Content',
-    note: 'Keep the route list visible and easy to extend.',
-  },
-  {
-    path: '/preview',
-    title: 'Preview',
-    note: 'Keep one interactive page to confirm hydration.',
-  },
-] as const;
-
-export default function Content() {
-  return (
-    <>
-      <SectionHeader
-        eyebrow="Content"
-        title="Four routes, one clear source of truth."
-        description="Keep the starter small and predictable. Add more routes when the app actually needs them."
-        actions={
-          <ActionRow>
-            <Button asChild>
-              <Link href="/workflow">Read the workflow</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/preview">Open the preview</Link>
-            </Button>
-          </ActionRow>
-        }
-      />
-
-      <CardGrid>
-        {routeMap.map((route) => (
-          <Card
-            eyebrow={route.path}
-            title={route.title}
-            description={route.note}
-          />
-        ))}
-      </CardGrid>
-    </>
-  );
-}

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

@@ -1,97 +0,0 @@
-import { state } from '@askrjs/askr';
-import { Link } from '@askrjs/askr/router';
-import { Button, Input } from '@askrjs/ui';
-import Counter from '../components/counter';
-import {
-  ActionRow,
-  Card,
-  CardGrid,
-  SectionHeader,
-} from '../components/site-shell';
-
-const sampleUsers: Record<
-  number,
-  { name: string; email: string; note: string }
-> = {
-  1: {
-    name: 'User 1',
-    email: 'user1@example.com',
-    note: 'Replace this with your own content or connect it to real data later.',
-  },
-  2: {
-    name: 'User 2',
-    email: 'user2@example.com',
-    note: 'This stays simple on purpose so the starter remains easy to delete or extend.',
-  },
-  3: {
-    name: 'User 3',
-    email: 'user3@example.com',
-    note: 'Interactive state still hydrates after static generation without adding async complexity.',
-  },
-};
-
-export default function Preview() {
-  const [userId, setUserId] = state(1);
-  const user = sampleUsers[userId()] ?? {
-    name: `User ${userId()}`,
-    email: `user${userId()}@example.com`,
-    note: 'Use this route as a safe place to try small interactive changes.',
-  };
-
-  return (
-    <>
-      <SectionHeader
-        eyebrow="Preview"
-        title="Interactive parts still work after static generation."
-        description="Keep one page interactive so you can verify hydration, state, and resource loading without turning the template into an app."
-        actions={
-          <ActionRow>
-            <Button asChild>
-              <Link href="/workflow">Read the workflow</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/content">Review the routes</Link>
-            </Button>
-          </ActionRow>
-        }
-      />
-
-      <CardGrid>
-        <Counter />
-
-        <Card
-          eyebrow="Interactive state"
-          title="State still hydrates after generation"
-          description="Change the user id to prove the generated page still responds in the browser."
-        >
-          <div class="preview-controls">
-            <Input
-              type="number"
-              min="1"
-              step="1"
-              value={String(userId())}
-              onInput={(event: Event) => {
-                const nextValue = Number.parseInt(
-                  (event.target as HTMLInputElement).value,
-                  10
-                );
-
-                setUserId(Number.isNaN(nextValue) ? 1 : Math.max(1, nextValue));
-              }}
-            />
-          </div>
-
-          <div class="resource-panel">
-            <div class="resource-status">
-              <span class="badge">Ready</span>
-              <span>Hydrated preview</span>
-            </div>
-            <h3>{user.name}</h3>
-            <p>{user.email}</p>
-            <p class="text-muted">{user.note}</p>
-          </div>
-        </Card>
-      </CardGrid>
-    </>
-  );
-}

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

@@ -1,51 +0,0 @@
-import { Link } from '@askrjs/askr/router';
-import { Button } from '@askrjs/ui';
-import {
-  ActionRow,
-  Card,
-  CardGrid,
-  SectionHeader,
-} from '../components/site-shell';
-
-const highlights = [
-  {
-    title: 'Fast feedback',
-    body: 'Run npm run dev and edit a page to stay in a SPA-style authoring loop.',
-  },
-  {
-    title: 'Deterministic output',
-    body: 'Keep one explicit route registry in src/routes.tsx so dev and generated output cannot drift.',
-  },
-  {
-    title: 'Hydrated preview',
-    body: 'Keep one interactive route so you can verify static output and browser behavior together.',
-  },
-];
-
-export default function Home() {
-  return (
-    <>
-      <SectionHeader
-        eyebrow="Static site generation"
-        title="Build a multi-page site, then ship it as plain HTML."
-        description="This sample keeps the loop small: author routes, preview in the SPA dev server, generate static files, and inspect the output."
-        actions={
-          <ActionRow>
-            <Button asChild>
-              <Link href="/workflow">See the workflow</Link>
-            </Button>
-            <Button asChild>
-              <Link href="/preview">Open the preview</Link>
-            </Button>
-          </ActionRow>
-        }
-      />
-
-      <CardGrid>
-        {highlights.map((highlight) => (
-          <Card title={highlight.title} description={highlight.body} />
-        ))}
-      </CardGrid>
-    </>
-  );
-}

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

@@ -1,15 +0,0 @@
-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/ssg/src/routes.tsx

@@ -1,15 +0,0 @@
-import { createRouteRegistry, group, route } from '@askrjs/askr/router';
-import AppLayout from './app';
-import Home from './pages/home';
-import Workflow from './pages/about';
-import Content from './pages/content';
-import Preview from './pages/example';
-
-export const pageRegistry = createRouteRegistry(() => {
-  group({ layout: AppLayout }, () => {
-    route('/', Home);
-    route('/workflow', Workflow);
-    route('/content', Content);
-    route('/preview', Preview);
-  });
-});

package/templates/ssg/src/styles.css

@@ -1,89 +0,0 @@
-@import '@askrjs/themes/default';
-
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  color-scheme: light;
-}
-
-body {
-  margin: 0;
-  min-height: 100vh;
-  color: var(--ak-color-fg);
-  font-family: var(--ak-font-family);
-  line-height: 1.5;
-  background: var(--ak-color-bg);
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-.site-shell {
-  min-height: 100vh;
-}
-
-.site-main {
-  padding-block: clamp(2rem, 4vw, 4rem);
-}
-
-.brand {
-  display: grid;
-  gap: 0.15rem;
-}
-
-.brand strong {
-  font-size: 1.05rem;
-  letter-spacing: 0.02em;
-}
-
-.brand span {
-  color: var(--ak-color-text-muted);
-  font-size: var(--ak-font-size-sm);
-}
-
-.action-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-space-sm);
-}
-
-.card-grid {
-  display: grid;
-  gap: var(--ak-space-lg);
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
-}
-
-.text-muted {
-  color: var(--ak-color-text-muted);
-}
-
-code {
-  padding: 0.15em 0.4em;
-  border-radius: 0.4rem;
-  background: var(--ak-color-surface-muted);
-  font-size: 0.9em;
-}
-
-.counter-value {
-  font-size: clamp(2rem, 4vw, 3.25rem);
-  font-weight: var(--ak-font-weight-bold);
-  letter-spacing: -0.05em;
-}
-
-.counter-controls,
-.preview-controls,
-.resource-status {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--ak-space-sm);
-  align-items: center;
-}
-
-.resource-panel {
-  display: grid;
-  gap: var(--ak-space-sm);
-}

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

@@ -1,5 +0,0 @@
-declare module '*.css' {
-  const css: string;
-
-  export default css;
-}

package/templates/ssg/ssg.config.ts

@@ -1,34 +0,0 @@
-import { readFileSync } from 'node:fs';
-import { resolve } from 'node:path';
-import type { DocumentRenderArgs } from '@askrjs/askr/ssg';
-import { pageRegistry } from './src/routes';
-
-export const outputDir = './dist';
-
-let clientTemplate: string | undefined;
-
-function renderDocument({ appHtml }: DocumentRenderArgs) {
-  clientTemplate ??= readFileSync(
-    resolve(process.cwd(), '.askr/client/index.html'),
-    'utf8'
-  );
-
-  const appRoot = /<div([^>]*\bid=["']app["'][^>]*)>\s*<\/div>/i;
-  if (!appRoot.test(clientTemplate)) {
-    throw new Error('Built client template must contain an empty #app root.');
-  }
-
-  return clientTemplate.replace(appRoot, `<div$1>${appHtml}</div>`);
-}
-
-export const staticConfig = {
-  registry: pageRegistry,
-  outputDir,
-  document: renderDocument,
-  assets: [
-    {
-      from: resolve(process.cwd(), '.askr/client/assets'),
-      to: 'assets',
-    },
-  ],
-};

package/templates/ssg/tests/app.test.tsx

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vite-plus/test';
-import { navItems } from '../src/app';
-
-describe('App shell', () => {
-  it('exposes the workflow-focused navigation order', () => {
-    expect(navItems.map((item) => item.label)).toEqual([
-      'Home',
-      'Workflow',
-      'Content',
-      'Preview',
-    ]);
-    expect(navItems.map((item) => item.href)).toEqual([
-      '/',
-      '/workflow',
-      '/content',
-      '/preview',
-    ]);
-  });
-});

package/templates/ssg/tests/components/counter.test.tsx

@@ -1,18 +0,0 @@
-import { describe, it, expect } from 'vite-plus/test';
-import { renderToString } from '@askrjs/askr/ssr';
-import Counter from '../../src/components/counter';
-
-describe('Counter', () => {
-  it('renders the initial hydration check view', () => {
-    const html = renderToString(() => <Counter />);
-
-    expect(html).toContain('Hydration check');
-    expect(html).toContain(
-      'This counter should still feel live after static generation.'
-    );
-    expect(html).toContain('0');
-    expect(html).toContain('even');
-    expect(html).toContain('- Decrement');
-    expect(html).toContain('+ Increment');
-  });
-});

package/templates/ssg/tests/resources.test.ts

@@ -1,11 +0,0 @@
-import { describe, it, expect } from 'vite-plus/test';
-import { fetchUser } from '../src/resources/user';
-
-describe('Resources', () => {
-  it('creates a resource for fetching user data', () => {
-    // Resources are called during component render
-    // Here we just verify the function is defined
-    expect(fetchUser).toBeDefined();
-    expect(typeof fetchUser).toBe('function');
-  });
-});

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

@@ -1,11 +0,0 @@
-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

@@ -1,20 +0,0 @@
-{
-  "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

@@ -1,10 +0,0 @@
-{
-  "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

@@ -1,24 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,28 +0,0 @@
-# {{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

@@ -1,38 +0,0 @@
-# {{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

@@ -1,16 +0,0 @@
-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
-*~