@askrjs/cli 0.0.3 → 0.0.4

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
-*~

package/templates/ssr/index.html

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

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

@@ -1,10 +0,0 @@
-import { serve } from '@askrjs/node';
-import app from 'virtual:askr-server';
-
-const port = Number(process.env.PORT ?? 3000);
-const running = await serve(app, {
-  host: process.env.HOST ?? '127.0.0.1',
-  port,
-  assets: { root: new URL('./dist', import.meta.url).pathname },
-});
-console.log(`Server started at ${running.url}`);

package/templates/ssr/src/app.tsx

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

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

@@ -1,12 +0,0 @@
-import { createAskrApp } from '@askrjs/server/askr';
-import { pageRegistry } from './routes';
-
-const app = createAskrApp({
-  name: '{{appName}}',
-  version: '0.1.0',
-  dependencies: undefined,
-  pages: pageRegistry,
-});
-
-export { app };
-export default app;

package/templates/ssr/src/main.tsx

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

@@ -1,75 +0,0 @@
-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>
-    </>
-  );
-}