create-what 0.8.4 → 0.11.0

package/README.md

@@ -23,30 +23,68 @@ bun create what@latest my-app
 npm create what@latest my-app -- --yes
 ```
 
+### Full-stack template
+
+```bash
+npm create what@latest my-app -- --fullstack
+cd my-app
+npm install
+npm run dev   # real SSR + ISR server -> http://localhost:3000
+```
+
+File-routed SSR with server loaders, server actions, client hydration, and
+origin-first ISR (stale-while-revalidate + on-demand revalidation + poll
+regeneration). Buildless: the server serves the client entry and the framework
+as native ES modules — no bundler, works on any Node host, no CDN required.
+
+In production, set `WHAT_REVALIDATE_SECRET` (the server refuses to start
+without it when `NODE_ENV=production`).
+
 ## Options
 
 The scaffolder prompts you for:
 
 1. **Project name** -- directory to create
-2. **React compat** -- include `what-react` for using React libraries (zustand, TanStack Query, etc.)
-3. **CSS approach** -- vanilla CSS, Tailwind CSS v4, or StyleX
+2. **Template** -- SPA (default) or full-stack (`--fullstack` / `--template=fullstack`)
+3. **React compat** (SPA only) -- include `what-react` for using React libraries (zustand, TanStack Query, etc.)
+4. **CSS approach** (SPA only) -- vanilla CSS, Tailwind CSS v4, or StyleX
 
 ## What You Get
 
+### SPA (default)
+
 ```
 my-app/
   src/
-    main.jsx         # App entry point with counter example
+    main.jsx          # App entry point with counter example
     styles.css        # Styles (vanilla, Tailwind, or StyleX)
   public/
     favicon.svg       # What Framework logo
   index.html          # HTML entry
   vite.config.js      # Pre-configured Vite (What compiler or React compat)
+  eslint.config.js    # eslint-plugin-what (compiler preset)
   tsconfig.json       # TypeScript config
   package.json
   .gitignore
 ```
 
+### Full-stack (`--fullstack`)
+
+```
+my-app/
+  src/
+    pages/            # File-routed pages (loader + page config + component)
+    actions/          # Server actions (mutations + cache revalidation)
+    routes.js         # Route table
+    entry-client.js   # Client hydration entry
+    db.js             # In-memory demo data (swap for SQLite/Postgres)
+    styles.css
+  server.js           # Node adapter + ISR engine + revalidate webhook
+  what.config.js      # Deploy adapter + ISR defaults
+  eslint.config.js    # eslint-plugin-what (recommended preset)
+  package.json
+```
+
 ### With React compat enabled
 
 The scaffold includes a working zustand demo showing a React state library running on What's signal engine.
@@ -61,11 +99,22 @@ StyleX is configured via `vite-plugin-stylex`. The counter example uses `stylex.
 
 ## Scripts
 
+### SPA
+
 | Script | Command |
 |---|---|
 | `npm run dev` | Start Vite dev server |
 | `npm run build` | Production build |
 | `npm run preview` | Preview production build |
+| `npm run lint` | ESLint (eslint-plugin-what) |
+
+### Full-stack
+
+| Script | Command |
+|---|---|
+| `npm run dev` | SSR + ISR server with auto-restart on change |
+| `npm start` | Same server, no watcher (production entry point) |
+| `npm run lint` | ESLint (eslint-plugin-what) |
 
 ## Links
 

package/index.js

@@ -18,6 +18,8 @@ const positional = args.filter(a => !a.startsWith('-'));
 const flags = new Set(args.filter(a => a.startsWith('-')));
 const skipPrompts = flags.has('--yes') || flags.has('-y');
 const showHelp = flags.has('--help') || flags.has('-h');
+let templateFlag = flags.has('--fullstack') ? 'fullstack' : null;
+for (const f of flags) { const m = f.match(/^--template=(.+)$/); if (m) templateFlag = m[1]; }
 const packageVersion = JSON.parse(readFileSync(new URL('./package.json', import.meta.url), 'utf8')).version;
 const whatVersionRange = `^${packageVersion}`;
 
@@ -29,8 +31,11 @@ if (showHelp) {
     create-what [project-name] [options]
 
   Options:
-    -y, --yes     Skip prompts and use defaults
-    -h, --help    Show this help message
+    --fullstack         Scaffold a full-stack SSR app (file routes, loaders,
+                        actions, origin-first ISR) instead of an SPA
+    --template=<name>   'spa' (default) or 'fullstack'
+    -y, --yes           Skip prompts and use defaults
+    -h, --help          Show this help message
 `);
   process.exit(0);
 }
@@ -110,7 +115,7 @@ async function gatherOptions() {
 
   if (skipPrompts) {
     projectName = projectName || 'my-what-app';
-    return { projectName, reactCompat, cssApproach };
+    return { projectName, reactCompat, cssApproach, template: templateFlag || 'spa' };
   }
 
   const prompter = createPrompter();
@@ -121,33 +126,61 @@ async function gatherOptions() {
     projectName = (await prompter.ask('  Project name: ')).trim() || 'my-what-app';
   }
 
-  reactCompat = await prompter.confirm('Add React library support? (what-react)');
-
-  cssApproach = await prompter.select('CSS approach:', [
-    { label: 'None (vanilla CSS)', value: 'none' },
-    { label: 'Tailwind CSS v4', value: 'tailwind' },
-    { label: 'StyleX', value: 'stylex' },
+  const template = templateFlag || await prompter.select('Template:', [
+    { label: 'SPA (client-side single-page app)', value: 'spa' },
+    { label: 'Full-stack (SSR + file routes + loaders + actions + ISR)', value: 'fullstack' },
   ]);
 
+  // The full-stack template is buildless (native ESM served by server.js), so
+  // the Vite-based React-compat / CSS tooling options don't apply to it.
+  if (template !== 'fullstack') {
+    reactCompat = await prompter.confirm('Add React library support? (what-react)');
+
+    cssApproach = await prompter.select('CSS approach:', [
+      { label: 'None (vanilla CSS)', value: 'none' },
+      { label: 'Tailwind CSS v4', value: 'tailwind' },
+      { label: 'StyleX', value: 'stylex' },
+    ]);
+  }
+
   prompter.close();
 
-  return { projectName, reactCompat, cssApproach };
+  return { projectName, reactCompat, cssApproach, template };
 }
 
 // ---------------------------------------------------------------------------
 // File generators
 // ---------------------------------------------------------------------------
 
-function generatePackageJson(packageName, { reactCompat, cssApproach }) {
+function generatePackageJson(packageName, { reactCompat, cssApproach, template }) {
   const deps = {
     'what-framework': whatVersionRange,
   };
-  const devDeps = {
-    vite: '^6.0.0',
-    'what-compiler': whatVersionRange,
-    'what-devtools-mcp': whatVersionRange,
-    '@babel/core': '^7.23.0',
-  };
+
+  // Full-stack apps are buildless: server.js does SSR + ISR and serves the
+  // client entry as native ES modules, so there is no Vite/compiler toolchain.
+  // `npm run dev` runs the real app with auto-restart on change.
+  const devDeps = template === 'fullstack'
+    ? {
+        'what-devtools-mcp': whatVersionRange,
+        eslint: '^9.0.0',
+        'eslint-plugin-what': whatVersionRange,
+      }
+    : {
+        vite: '^6.0.0',
+        'what-compiler': whatVersionRange,
+        'what-devtools-mcp': whatVersionRange,
+        '@babel/core': '^7.23.0',
+        eslint: '^9.0.0',
+        'eslint-plugin-what': whatVersionRange,
+      };
+
+  const scripts = template === 'fullstack'
+    ? { dev: 'node --watch server.js', start: 'node server.js', lint: 'eslint .' }
+    : { dev: 'vite', build: 'vite build', preview: 'vite preview', lint: 'eslint .' };
+  if (template === 'fullstack') {
+    deps['what-isr'] = whatVersionRange;
+  }
 
   if (reactCompat) {
     deps['what-react'] = whatVersionRange;
@@ -171,11 +204,7 @@ function generatePackageJson(packageName, { reactCompat, cssApproach }) {
     private: true,
     version: '0.1.0',
     type: 'module',
-    scripts: {
-      dev: 'vite',
-      build: 'vite build',
-      preview: 'vite preview',
-    },
+    scripts,
     dependencies: deps,
     devDependencies: devDeps,
   }, null, 2) + '\n';
@@ -329,20 +358,20 @@ function generateMainJsx({ reactCompat, cssApproach }) {
 }
 
 function generateMainDefault() {
-  return `import { mount, useSignal } from 'what-framework';
+  return `import { mount, signal } from 'what-framework';
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main className="app-shell">
       <h1>What Framework</h1>
-      <p>Compiler-first JSX, React-familiar authoring.</p>
+      <p>Compiler-first JSX, fine-grained signals.</p>
 
       <section className="counter">
-        <button onClick={() => count.set(c => c - 1)}>-</button>
+        <button onClick={() => count(c => c - 1)}>-</button>
         <output>{count()}</output>
-        <button onClick={() => count.set(c => c + 1)}>+</button>
+        <button onClick={() => count(c => c + 1)}>+</button>
       </section>
     </main>
   );
@@ -353,10 +382,10 @@ mount(<App />, '#app');
 }
 
 function generateMainWithTailwind() {
-  return `import { mount, useSignal } from 'what-framework';
+  return `import { mount, signal } from 'what-framework';
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main className="min-h-screen flex items-center justify-center bg-slate-50">
@@ -367,14 +396,14 @@ function App() {
         <section className="mt-6 inline-flex items-center gap-3">
           <button
             className="w-9 h-9 rounded-lg border border-slate-300 bg-white text-slate-900 hover:border-blue-600 cursor-pointer"
-            onClick={() => count.set(c => c - 1)}
+            onClick={() => count(c => c - 1)}
           >
             -
           </button>
           <output className="min-w-[2ch] text-center font-bold">{count()}</output>
           <button
             className="w-9 h-9 rounded-lg border border-slate-300 bg-white text-slate-900 hover:border-blue-600 cursor-pointer"
-            onClick={() => count.set(c => c + 1)}
+            onClick={() => count(c => c + 1)}
           >
             +
           </button>
@@ -389,7 +418,7 @@ mount(<App />, '#app');
 }
 
 function generateMainWithStyleX() {
-  return `import { mount, useSignal } from 'what-framework';
+  return `import { mount, signal } from 'what-framework';
 import * as stylex from '@stylexjs/stylex';
 
 const styles = stylex.create({
@@ -443,7 +472,7 @@ const styles = stylex.create({
 });
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main {...stylex.props(styles.page)}>
@@ -452,9 +481,9 @@ function App() {
         <p {...stylex.props(styles.subtitle)}>Compiler-first JSX + StyleX.</p>
 
         <section {...stylex.props(styles.counter)}>
-          <button {...stylex.props(styles.button)} onClick={() => count.set(c => c - 1)}>-</button>
+          <button {...stylex.props(styles.button)} onClick={() => count(c => c - 1)}>-</button>
           <output {...stylex.props(styles.output)}>{count()}</output>
-          <button {...stylex.props(styles.button)} onClick={() => count.set(c => c + 1)}>+</button>
+          <button {...stylex.props(styles.button)} onClick={() => count(c => c + 1)}>+</button>
         </section>
       </div>
     </main>
@@ -469,7 +498,7 @@ function generateMainWithReactCompat({ cssApproach }) {
   // React compat demo: uses zustand (a real React library) to show it works
   // with What Framework under the hood.
   if (cssApproach === 'tailwind') {
-    return `import { mount, useSignal } from 'what-framework';
+    return `import { mount, signal } from 'what-framework';
 import { create } from 'zustand';
 
 // A real React state library — works with What Framework via what-react!
@@ -508,7 +537,7 @@ function BearCounter() {
 }
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main className="min-h-screen flex items-center justify-center bg-slate-50">
@@ -519,14 +548,14 @@ function App() {
         <section className="mt-6 inline-flex items-center gap-3">
           <button
             className="w-9 h-9 rounded-lg border border-slate-300 bg-white text-slate-900 hover:border-blue-600 cursor-pointer"
-            onClick={() => count.set(c => c - 1)}
+            onClick={() => count(c => c - 1)}
           >
             -
           </button>
           <output className="min-w-[2ch] text-center font-bold">{count()}</output>
           <button
             className="w-9 h-9 rounded-lg border border-slate-300 bg-white text-slate-900 hover:border-blue-600 cursor-pointer"
-            onClick={() => count.set(c => c + 1)}
+            onClick={() => count(c => c + 1)}
           >
             +
           </button>
@@ -543,7 +572,7 @@ mount(<App />, '#app');
   }
 
   if (cssApproach === 'stylex') {
-    return `import { mount, useSignal } from 'what-framework';
+    return `import { mount, signal } from 'what-framework';
 import { create } from 'zustand';
 import * as stylex from '@stylexjs/stylex';
 
@@ -629,7 +658,7 @@ function BearCounter() {
 }
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main {...stylex.props(styles.page)}>
@@ -638,9 +667,9 @@ function App() {
         <p {...stylex.props(styles.subtitle)}>React compat + StyleX.</p>
 
         <section {...stylex.props(styles.counter)}>
-          <button {...stylex.props(styles.button)} onClick={() => count.set(c => c - 1)}>-</button>
+          <button {...stylex.props(styles.button)} onClick={() => count(c => c - 1)}>-</button>
           <output {...stylex.props(styles.output)}>{count()}</output>
-          <button {...stylex.props(styles.button)} onClick={() => count.set(c => c + 1)}>+</button>
+          <button {...stylex.props(styles.button)} onClick={() => count(c => c + 1)}>+</button>
         </section>
 
         <BearCounter />
@@ -654,7 +683,7 @@ mount(<App />, '#app');
   }
 
   // React compat with vanilla CSS
-  return `import { mount, useSignal } from 'what-framework';
+  return `import { mount, signal } from 'what-framework';
 import { create } from 'zustand';
 
 // A real React state library — works with What Framework via what-react!
@@ -683,7 +712,7 @@ function BearCounter() {
 }
 
 function App() {
-  const count = useSignal(0);
+  const count = signal(0);
 
   return (
     <main className="app-shell">
@@ -691,9 +720,9 @@ function App() {
       <p>React compat enabled — use React libraries with signals.</p>
 
       <section className="counter">
-        <button onClick={() => count.set(c => c - 1)}>-</button>
+        <button onClick={() => count(c => c - 1)}>-</button>
         <output>{count()}</output>
-        <button onClick={() => count.set(c => c + 1)}>+</button>
+        <button onClick={() => count(c => c + 1)}>+</button>
       </section>
 
       <BearCounter />
@@ -807,11 +836,18 @@ output {
 `;
 }
 
-function generateReadme(packageName, { reactCompat, cssApproach }) {
-  let notes = `- Canonical package name is \`what-framework\`.
+function generateReadme(packageName, { reactCompat, cssApproach, template }) {
+  let notes = template === 'fullstack'
+    ? `- Canonical package name is \`what-framework\`.
+- Pages are authored with \`h()\` in plain .js so they run isomorphically (Node
+  SSR + browser hydration) with no compile step.
+- Event handlers accept both \`onClick\` and \`onclick\`.
+- Lint with \`npm run lint\` (eslint-plugin-what).`
+    : `- Canonical package name is \`what-framework\`.
 - Uses the What compiler for JSX transforms and automatic reactivity.
 - Vite is preconfigured; use \`npm run dev/build/preview\`.
 - Event handlers accept both \`onClick\` and \`onclick\`; docs and templates use \`onClick\`.
+- Lint with \`npm run lint\` (eslint-plugin-what).
 - Bun is also supported: \`bun create what@latest\`, \`bun run dev\`.`;
 
   if (reactCompat) {
@@ -830,6 +866,59 @@ function generateReadme(packageName, { reactCompat, cssApproach }) {
 - StyleX is configured via \`vite-plugin-stylex\`. Define styles with \`stylex.create()\` and apply with \`{...stylex.props()}\`.`;
   }
 
+  if (template === 'fullstack') {
+    return `# ${packageName}
+
+A full-stack What Framework app: file-routed SSR, server loaders, server
+actions, client hydration, and origin-first ISR (stale-while-revalidate +
+on-demand revalidation + poll regeneration) — works on any host, no CDN
+required. Buildless: the server serves the client entry and the framework as
+native ES modules, so there is no bundle step.
+
+## Run
+
+\`\`\`bash
+npm install
+npm run dev      # SSR server with auto-restart on change → http://localhost:3000
+npm start        # same server, no watcher (production entry point)
+\`\`\`
+
+In production, set \`WHAT_REVALIDATE_SECRET\` (the server refuses to start
+without it when \`NODE_ENV=production\`):
+
+\`\`\`bash
+WHAT_REVALIDATE_SECRET=$(node -e "console.log(require('node:crypto').randomBytes(24).toString('hex'))") \\
+NODE_ENV=production npm start
+\`\`\`
+
+## Structure
+
+- \`src/pages/*\` — pages. Each may export \`page\` (route config), \`loader\` (server
+  data), \`getStaticPaths\` (pre-render), and a default component.
+- \`src/actions/*\` — server actions (mutations), served at \`/__what_action\`. Call
+  \`revalidatePath\`/\`revalidateTag\` after a mutation to purge the ISR cache.
+- \`src/routes.js\` — the route table (loaders/getStaticPaths/page bound per route).
+- \`src/entry-client.js\` — client hydration entry: re-renders the matched page
+  with the server's loader data (\`#__what_data\`) and attaches interactivity.
+- \`server.js\` — Node adapter + ISR engine + revalidate webhook + poll scheduler
+  + static serving (client entry, framework modules, \`public/\`).
+- \`what.config.js\` — deploy adapter + ISR defaults.
+
+### ISR cheat-sheet
+
+- \`page = { mode: 'static', revalidate: 60 }\` → cached, regenerated in the
+  background after 60s (stale-while-revalidate). Check the \`X-What-Cache\`
+  response header: MISS on first hit, HIT after.
+- \`page = { mode: 'server' }\` → always fresh, never cached.
+- \`revalidatePath('/')\` / \`revalidateTag('posts')\` → on-demand purge.
+- \`POST /__what_revalidate\` with \`WHAT_REVALIDATE_SECRET\` → CMS-triggered purge.
+
+## Notes
+
+${notes}
+`;
+  }
+
   return `# ${packageName}
 
 ## Run
@@ -847,6 +936,458 @@ ${notes}
 `;
 }
 
+// ---------------------------------------------------------------------------
+// Full-stack template — file-routed SSR pages, server loaders, getStaticPaths,
+// origin-first ISR, and a server action that revalidates the cache. Authored
+// with h() in plain .js so it runs with `node server.js` (no build step) while
+// `npm run dev` still serves the client. Mirrors examples/blog (proven by its
+// e2e suite). The full loop: SSR → loader → ISR (MISS→HIT) → action → revalidate.
+// ---------------------------------------------------------------------------
+function generateFullstackFiles(root, packageName) {
+  mkdirSync(resolve(root, 'src', 'pages'), { recursive: true });
+  mkdirSync(resolve(root, 'src', 'actions'), { recursive: true });
+
+  // Tiny in-memory "database". Swap for SQLite/Postgres — the loader/action
+  // contract is identical.
+  writeFileSync(resolve(root, 'src', 'db.js'), `// In-memory demo data. A real app would use SQLite/Postgres; the loader and
+// action contracts are identical either way.
+
+const posts = [
+  { slug: 'hello-world', title: 'Hello, World', body: 'The first post.', createdAt: 1 },
+  { slug: 'why-signals', title: 'Why Signals', body: 'Fine-grained reactivity, no virtual DOM, components run once.', createdAt: 2 },
+];
+
+export function listPosts() {
+  return [...posts].sort((a, b) => b.createdAt - a.createdAt);
+}
+
+export function getPost(slug) {
+  return posts.find((p) => p.slug === slug) || null;
+}
+
+export function createPost({ title, body }) {
+  const slug = String(title).toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '');
+  const post = { slug, title, body, createdAt: Date.now() };
+  posts.push(post);
+  return post;
+}
+`);
+
+  // Server action: mutate, then revalidate the cached pages it affects.
+  writeFileSync(resolve(root, 'src', 'actions', 'posts.js'), `// Server action: create a post, then revalidate the cached home listing.
+// revalidatePath purges the origin ISR cache (and any CDN) so the new post
+// appears immediately on the next request.
+
+import { action, revalidatePath } from 'what-framework/server';
+import { createPost } from '../db.js';
+
+export const createPostAction = action(
+  async ({ title, body }) => {
+    const post = createPost({ title, body });
+    return { ok: true, slug: post.slug };
+  },
+  { id: 'createPost', revalidate: ['/'] } // purge the home listing on success
+);
+`);
+
+  // Home page — static + ISR, lists posts via a loader, plus a hydrated
+  // counter that proves the client entry attaches interactivity.
+  writeFileSync(resolve(root, 'src', 'pages', 'home.js'), `// Home page.
+//   export const page   -> route config (JSON-safe: mode, revalidate, tags)
+//   export const loader -> runs on the server before render; result -> loaderData
+//   export default      -> the page component (runs once, no re-renders)
+//
+// This module is isomorphic: the server renders it to HTML, then
+// src/entry-client.js hydrates the same component in the browser (reusing the
+// server DOM and attaching the onclick handler + reactive text below).
+
+import { h, Head, signal, useLoaderData } from 'what-framework';
+import { listPosts } from '../db.js';
+
+export const page = { mode: 'static', revalidate: 60, tags: ['posts'] };
+
+export const loader = () => ({ posts: listPosts() });
+
+export default function Home() {
+  const { posts } = useLoaderData();
+  const likes = signal(0, 'likes');
+  return h('main', { class: 'container' },
+    h(Head, {
+      title: '${packageName}',
+      meta: [{ name: 'description', content: 'A full-stack app built with What Framework' }],
+    }),
+    h('h1', {}, '${packageName}'),
+    h('p', {}, 'Server-rendered, ISR-cached, hydrated on the client.'),
+    h('section', { class: 'like-demo' },
+      h('button', { onclick: () => likes(n => n + 1) }, 'Like'),
+      h('output', {}, () => String(likes())),
+      h('span', { class: 'hint' }, 'hydrated — this button works in the browser')
+    ),
+    h('ul', {}, posts.map((p) =>
+      h('li', { key: p.slug }, h('a', { href: \`/blog/\${p.slug}\` }, p.title))
+    )),
+    h('p', {}, h('a', { href: '/new' }, '+ New post'))
+  );
+}
+`);
+
+  // Dynamic /blog/[slug] — loader + getStaticPaths + ISR + per-post <Head>.
+  writeFileSync(resolve(root, 'src', 'pages', 'post.js'), `// Dynamic post page. getStaticPaths pre-renders known slugs at build; unknown
+// slugs render on first hit (fallback: 'blocking') and are then cached.
+
+import { h, Head, useLoaderData } from 'what-framework';
+import { getPost, listPosts } from '../db.js';
+
+export const page = { mode: 'static', revalidate: 60, tags: ['posts'] };
+
+export const loader = ({ params }) => ({ post: getPost(params.slug) });
+
+export async function getStaticPaths() {
+  return {
+    paths: listPosts().map((p) => ({ params: { slug: p.slug } })),
+    fallback: 'blocking',
+  };
+}
+
+export default function Post() {
+  const { post } = useLoaderData();
+  if (!post) return h('main', { class: 'container' }, h('h1', {}, 'Not found'));
+  return h('main', { class: 'container' },
+    h(Head, {
+      title: \`\${post.title} — ${packageName}\`,
+      meta: [{ property: 'og:title', content: post.title }],
+    }),
+    h('article', {}, h('h1', {}, post.title), h('p', {}, post.body)),
+    h('p', {}, h('a', { href: '/' }, '← Back'))
+  );
+}
+`);
+
+  // /new — mode:'server' (never cached), posts to the createPost action.
+  writeFileSync(resolve(root, 'src', 'pages', 'new.js'), `// New-post form. mode:'server' so it's always fresh. src/entry-client.js
+// enhances the form: it submits to the createPost server action as JSON with
+// the X-What-Action header (the action protocol), then navigates to the post.
+
+import { h, Head } from 'what-framework';
+
+export const page = { mode: 'server' };
+
+export default function NewPost() {
+  return h('main', { class: 'container' },
+    h(Head, { title: 'New post — ${packageName}' }),
+    h('h1', {}, 'New post'),
+    h('form', { method: 'post', action: '/__what_action', 'data-action': 'createPost' },
+      h('input', { name: 'title', placeholder: 'Title', required: true }),
+      h('textarea', { name: 'body', placeholder: 'Write something…', required: true }),
+      h('button', { type: 'submit' }, 'Publish')
+    ),
+    h('p', {}, h('a', { href: '/' }, '← Back'))
+  );
+}
+`);
+
+  // Route table. In a JSX app the vite plugin generates this from src/pages/**;
+  // here it's hand-written so the app runs with plain \`node server.js\`.
+  writeFileSync(resolve(root, 'src', 'routes.js'), `// Each entry carries the page's default component plus its live
+// loader/getStaticPaths/page bindings.
+
+import Home, { loader as homeLoader, page as homePage } from './pages/home.js';
+import Post, { loader as postLoader, getStaticPaths as postPaths, page as postPage } from './pages/post.js';
+import NewPost, { page as newPage } from './pages/new.js';
+
+// Importing the action registers it so /__what_action can dispatch it.
+import './actions/posts.js';
+
+export const routes = [
+  { path: '/', component: Home, loader: homeLoader, page: homePage, mode: homePage.mode },
+  { path: '/blog/:slug', component: Post, loader: postLoader, getStaticPaths: postPaths, page: postPage, mode: postPage.mode },
+  { path: '/new', component: NewPost, page: newPage, mode: newPage.mode },
+];
+`);
+
+  // Client hydration entry — loaded by the SSR document (see server.js). Reuses
+  // the server-rendered DOM and attaches interactivity. No bundler involved:
+  // the browser resolves 'what-framework' through the import map server.js
+  // injects, and ./pages/* are served as plain ES modules.
+  writeFileSync(resolve(root, 'src', 'entry-client.js'), `// Client hydration entry.
+// The SSR document loads this as a native ES module. It matches the current
+// URL to a page component, re-runs it with the server's loader data (pages
+// call useLoaderData(), which reads the #__what_data payload the server
+// embedded), and hydrate() walks the existing server-rendered DOM — attaching
+// event handlers and reactive bindings instead of recreating elements.
+//
+// NOTE: import page modules directly, never ./routes.js — the route table also
+// imports the server actions, which pull in Node-only modules.
+
+import { h, hydrate } from 'what-framework';
+import Home from './pages/home.js';
+import Post from './pages/post.js';
+import NewPost from './pages/new.js';
+
+function matchPage(pathname) {
+  if (pathname === '/') return h(Home, {});
+  const post = pathname.match(/^\\/blog\\/([^/]+)\\/?$/);
+  if (post) return h(Post, { slug: decodeURIComponent(post[1]) });
+  if (pathname === '/new') return h(NewPost, {});
+  return null;
+}
+
+const vnode = matchPage(location.pathname);
+if (vnode) hydrate(vnode, document.body);
+
+// Progressive enhancement for server-action forms: submit as JSON to
+// /__what_action with the X-What-Action header (the served-action protocol),
+// then navigate to the result. The CSRF token comes from the double-submit
+// cookie the server sets on every HTML response (or the meta tag on
+// uncached pages) — same lookup the framework's own action() client uses.
+function csrfToken() {
+  const meta = document.querySelector('meta[name="what-csrf-token"]');
+  if (meta) return meta.getAttribute('content');
+  const match = document.cookie.match(/(?:^|;\\s*)what-csrf=([^;]+)/);
+  return match ? decodeURIComponent(match[1]) : null;
+}
+
+for (const form of document.querySelectorAll('form[data-action]')) {
+  form.addEventListener('submit', async (event) => {
+    event.preventDefault();
+    const args = Object.fromEntries(new FormData(form));
+    const headers = { 'content-type': 'application/json', 'x-what-action': form.dataset.action };
+    const token = csrfToken();
+    if (token) headers['x-csrf-token'] = token;
+    const res = await fetch('/__what_action', {
+      method: 'POST',
+      headers,
+      credentials: 'same-origin',
+      body: JSON.stringify({ args: [args] }),
+    });
+    const result = await res.json().catch(() => ({}));
+    if (res.ok) {
+      location.href = result.slug ? \`/blog/\${result.slug}\` : '/';
+    } else {
+      console.error('[what] action failed:', result.message || res.status);
+    }
+  });
+}
+`);
+
+  // Stylesheet for the SSR pages (linked from the document head in server.js).
+  writeFileSync(resolve(root, 'src', 'styles.css'), `:root {
+  color-scheme: light;
+  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  min-height: 100vh;
+  background: #f4f6fb;
+  color: #0f172a;
+}
+
+.container {
+  max-width: 640px;
+  margin: 0 auto;
+  padding: 2.5rem 1.25rem;
+}
+
+a {
+  color: #2563eb;
+}
+
+button {
+  border: 1px solid #9aa7bb;
+  background: #ffffff;
+  color: #0f172a;
+  padding: 0.4rem 0.9rem;
+  border-radius: 10px;
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #2563eb;
+}
+
+.like-demo {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  margin: 0.5rem 0 1rem;
+}
+
+.like-demo output {
+  min-width: 2ch;
+  text-align: center;
+  font-weight: 700;
+}
+
+.like-demo .hint {
+  color: #64748b;
+  font-size: 0.875rem;
+}
+
+form {
+  display: grid;
+  gap: 0.75rem;
+  max-width: 420px;
+}
+
+input,
+textarea {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #9aa7bb;
+  border-radius: 10px;
+  font: inherit;
+}
+`);
+
+  // Full-stack server: Node adapter + origin-first ISR + revalidate webhook +
+  // poll scheduler + static serving for the buildless client (native ESM).
+  writeFileSync(resolve(root, 'server.js'), `// Full-stack server. \`npm run dev\` (auto-restart) or \`node server.js\`
+// → http://localhost:3000. Wires the Node adapter + origin-first ISR engine +
+// on-demand revalidation webhook + poll scheduler. No CDN — and no bundler —
+// required: the client entry and the framework are served as native ES modules
+// (see the import map below).
+
+import http from 'node:http';
+import { randomBytes } from 'node:crypto';
+import { existsSync, statSync, createReadStream } from 'node:fs';
+import { extname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { createRequestHandler, toNodeListener } from 'what-framework/server';
+import {
+  createCacheEngine,
+  createMemoryStore,
+  createRevalidateWebhook,
+  createScheduler,
+} from 'what-isr';
+import { routes } from './src/routes.js';
+
+const ROOT = fileURLToPath(new URL('.', import.meta.url));
+const isProd = process.env.NODE_ENV === 'production';
+
+// Secret for the on-demand revalidation webhook (POST /__what_revalidate).
+// Required in production; auto-generated per run in dev so there is never a
+// shared default secret.
+let REVALIDATE_SECRET = process.env.WHAT_REVALIDATE_SECRET;
+if (!REVALIDATE_SECRET) {
+  if (isProd) {
+    console.error(
+      '[${packageName}] WHAT_REVALIDATE_SECRET must be set in production.\\n' +
+      \"  Generate one:  node -e \\\"console.log(require('node:crypto').randomBytes(24).toString('hex'))\\\"\"
+    );
+    process.exit(1);
+  }
+  REVALIDATE_SECRET = randomBytes(24).toString('hex');
+  console.log(\`[dev] WHAT_REVALIDATE_SECRET not set — generated for this run: \${REVALIDATE_SECRET}\`);
+}
+
+// Origin ISR cache. Swap createMemoryStore() for createFilesystemStore({dir})
+// to survive restarts, or createRedisStore({client}) for multi-instance.
+const cache = createCacheEngine({ store: createMemoryStore() });
+
+// Keep the home listing warm every 5 minutes regardless of traffic.
+const scheduler = createScheduler(cache);
+scheduler.register({ path: '/', query: {}, config: routes[0].page }, { intervalMs: 5 * 60 * 1000 });
+
+// The browser loads /src/entry-client.js as a native ES module; this import
+// map resolves its bare imports. Sources are served from node_modules below.
+const importMap = {
+  imports: {
+    'what-framework': '/node_modules/what-framework/src/index.js',
+    'what-core': '/node_modules/what-core/src/index.js',
+  },
+};
+
+const documentOptions = {
+  clientEntry: '/src/entry-client.js',
+  head:
+    \`<script type="importmap">\${JSON.stringify(importMap)}</script>\` +
+    '<link rel="stylesheet" href="/src/styles.css">' +
+    '<link rel="icon" type="image/svg+xml" href="/favicon.svg">',
+};
+
+export function createHandler() {
+  return createRequestHandler({
+    routes,
+    cache,
+    revalidateWebhook: createRevalidateWebhook(cache, { secret: REVALIDATE_SECRET }),
+    document: documentOptions,
+  });
+}
+
+// --- Static files (client entry, page modules, framework sources, public/) ---
+
+const MIME = {
+  '.js': 'text/javascript; charset=utf-8',
+  '.mjs': 'text/javascript; charset=utf-8',
+  '.css': 'text/css; charset=utf-8',
+  '.json': 'application/json; charset=utf-8',
+  '.svg': 'image/svg+xml',
+  '.png': 'image/png',
+  '.jpg': 'image/jpeg',
+  '.ico': 'image/x-icon',
+  '.txt': 'text/plain; charset=utf-8',
+  '.woff2': 'font/woff2',
+};
+
+// Only these prefixes are served from the project root; anything else falls
+// back to public/ (favicon etc.) and then to the app handler.
+const SERVED_PREFIXES = ['/src/', '/node_modules/what-framework/', '/node_modules/what-core/'];
+
+function resolveStaticFile(pathname) {
+  if (pathname.includes('..') || pathname.includes('\\0')) return null;
+  const file = SERVED_PREFIXES.some((p) => pathname.startsWith(p))
+    ? resolve(join(ROOT, pathname))
+    : resolve(join(ROOT, 'public', pathname));
+  if (!file.startsWith(resolve(ROOT))) return null;
+  if (!existsSync(file) || !statSync(file).isFile()) return null;
+  return file;
+}
+
+// --- Start (node server.js / npm run dev), not when imported by tests ---
+
+if (import.meta.url === \`file://\${process.argv[1]}\`) {
+  const app = toNodeListener(createHandler());
+
+  const server = http.createServer((req, res) => {
+    if (req.method === 'GET' || req.method === 'HEAD') {
+      const pathname = decodeURIComponent(new URL(req.url, 'http://localhost').pathname);
+      const file = resolveStaticFile(pathname);
+      if (file) {
+        res.writeHead(200, { 'content-type': MIME[extname(file)] || 'application/octet-stream' });
+        if (req.method === 'HEAD') return res.end();
+        return createReadStream(file).pipe(res);
+      }
+    }
+    app(req, res);
+  });
+
+  scheduler.start();
+  const stop = () => { try { scheduler.stop(); } catch {} server.close(); };
+  process.once('SIGTERM', stop);
+  process.once('SIGINT', stop);
+
+  const port = Number(process.env.PORT) || 3000;
+  server.listen(port, () => console.log(\`${packageName} → http://localhost:\${port}\`));
+}
+`);
+
+  // App config — the CLI reads this to pick a deploy adapter + ISR defaults.
+  writeFileSync(resolve(root, 'what.config.js'), `// What Framework app config. \`what build\` / \`what start\` read this to pick a
+// deploy adapter and ISR defaults.
+export default {
+  adapter: 'node', // 'node' | 'vercel' | 'cloudflare' | 'static'
+  isr: {
+    store: 'memory', // 'memory' | 'filesystem' | 'redis'
+    defaultRevalidate: 60,
+  },
+};
+`);
+}
+
 // ---------------------------------------------------------------------------
 // Main
 // ---------------------------------------------------------------------------
@@ -1085,8 +1626,10 @@ count(c => c + 1) // update
   // package.json
   writeFileSync(resolve(root, 'package.json'), generatePackageJson(packageName, options));
 
-  // index.html
-  writeFileSync(resolve(root, 'index.html'), generateIndexHtml(packageName));
+  // index.html (SPA only — the full-stack server renders its own document)
+  if (options.template !== 'fullstack') {
+    writeFileSync(resolve(root, 'index.html'), generateIndexHtml(packageName));
+  }
 
   // favicon
   writeFileSync(resolve(root, 'public', 'favicon.svg'), `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
@@ -1101,8 +1644,35 @@ count(c => c + 1) // update
 </svg>
 `);
 
-  // vite.config.js
-  writeFileSync(resolve(root, 'vite.config.js'), generateViteConfig(options));
+  // vite.config.js (SPA only — the full-stack template is buildless)
+  if (options.template !== 'fullstack') {
+    writeFileSync(resolve(root, 'vite.config.js'), generateViteConfig(options));
+  }
+
+  // eslint.config.js — eslint-plugin-what flat config.
+  //   SPA: the What compiler handles event casing + reactive wrapping, so use
+  //        the `compiler` preset (the compiler-covered rules are off).
+  //   Fullstack: buildless h() authoring is the template's design, so use
+  //        `recommended` with the JSX-only h() rule disabled.
+  writeFileSync(resolve(root, 'eslint.config.js'), options.template === 'fullstack'
+    ? `import what from 'eslint-plugin-what';
+
+export default [
+  { ignores: ['node_modules'] },
+  what.configs.recommended,
+  // This template authors pages with h() on purpose (buildless, no compiler).
+  { rules: { 'what/no-h-in-user-code': 'off' } },
+];
+`
+    : `import what from 'eslint-plugin-what';
+
+export default [
+  { ignores: ['dist', 'node_modules'] },
+  // 'compiler' preset: this project uses the What compiler (via Vite), which
+  // handles event casing and reactive JSX wrapping automatically.
+  what.configs.compiler,
+];
+`);
 
   // tsconfig.json
   writeFileSync(resolve(root, 'tsconfig.json'), JSON.stringify({
@@ -1136,14 +1706,20 @@ count(c => c + 1) // update
     recommendations: [],
   }, null, 2) + '\n');
 
-  // src/main.jsx
-  writeFileSync(resolve(root, 'src', 'main.jsx'), generateMainJsx(options));
-
-  // src/styles.css
-  if (reactCompat && cssApproach === 'none') {
-    writeFileSync(resolve(root, 'src', 'styles.css'), generateStylesWithReactCompat());
+  // Full-stack scaffold: file-routed SSR pages + server + client entry + ISR
+  // config (writes its own src/styles.css). SPA scaffold: Vite entry + styles.
+  if (options.template === 'fullstack') {
+    generateFullstackFiles(root, packageName);
   } else {
-    writeFileSync(resolve(root, 'src', 'styles.css'), generateStyles(options));
+    // src/main.jsx
+    writeFileSync(resolve(root, 'src', 'main.jsx'), generateMainJsx(options));
+
+    // src/styles.css
+    if (reactCompat && cssApproach === 'none') {
+      writeFileSync(resolve(root, 'src', 'styles.css'), generateStylesWithReactCompat());
+    } else {
+      writeFileSync(resolve(root, 'src', 'styles.css'), generateStyles(options));
+    }
   }
 
   // README.md
@@ -1163,7 +1739,11 @@ count(c => c + 1) // update
   console.log('\nNext steps:');
   console.log(`  cd ${root}`);
   console.log('  npm install');
-  console.log('  npm run dev\n');
+  if (options.template === 'fullstack') {
+    console.log('  npm run dev   # SSR + ISR server → http://localhost:3000\n');
+  } else {
+    console.log('  npm run dev\n');
+  }
 }
 
 main().catch(err => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-what",
-  "version": "0.8.4",
+  "version": "0.11.0",
   "description": "Scaffold a new What Framework project",
   "type": "module",
   "bin": {