create-fff-app 0.1.9 → 0.1.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-fff-app",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Scaffold a new fff-stack project",
   "bin": {
     "create-fff-app": "src/index.ts"

package/src/index.ts

@@ -127,21 +127,18 @@ console.log(`
 
   ${bold('Next steps:')}
 ${cdStep}
-    ${dim('# Install JS dependencies')}
-    ${cyan('bun install')}
+    ${dim('# Install everything at once')}
+    ${cyan('bun run setup')}
 
-    ${dim('# Install Fable (F# → JS compiler)')}
-    ${cyan('dotnet tool restore')}
+    ${dim('# Start local dev server (no Cloudflare account needed)')}
+    ${cyan('bun run demo')}       ${dim('→ http://localhost:3000')}
 
-    ${dim('# Set up Cloudflare D1 (run once)')}
-    ${cyan('wrangler d1 create ' + projectName + '-db')}
-    ${dim('# → copy the database_id into wrangler.toml')}
-
-    ${dim('# Apply the schema')}
-    ${cyan('bun run db:migrate:local')}
+  ${bold('When ready for Cloudflare Workers:')}
 
-    ${dim('# Start the full dev stack')}
-    ${cyan('bun dev')}
+    ${dim('# Set up D1 database (one-time)')}
+    ${cyan('wrangler d1 create ' + projectName + '-db')}
+    ${dim('# → copy database_id into wrangler.toml, then:')}
+    ${cyan('bun dev')}            ${dim('→ http://localhost:8787')}
 
   ${bold('Docs:')} https://github.com/Alcogy/fff-stack
 `);

package/template/dev-server.ts

@@ -1,62 +1,21 @@
 #!/usr/bin/env bun
 /**
- * fff-stack dev server — runs the template demo without .NET/Fable.
+ * fff-stack dev server — runs without .NET/Fable or Cloudflare account.
  *
- *   bun run demo                          # in-memory mock API
- *   WRANGLER_URL=http://localhost:8787 bun run demo  # proxy to wrangler dev
+ *   bun run demo                          # local dev with in-memory data
+ *   WRANGLER_URL=http://localhost:8787 bun run demo  # proxy /api/* to wrangler dev
  */
 import { compile } from '@fff-stack/fjsx-compiler';
 import { readFileSync, existsSync, watch } from 'fs';
-import { join, extname, basename } from 'path';
+import { join, basename } from 'path';
 
 const PREFERRED_PORT   = Number(process.env.PORT ?? 3000);
 const ROOT             = import.meta.dir;
 const COMPONENTS_DIR   = join(ROOT, 'src/client/Components');
-const SERVER_PAGES_DIR = join(ROOT, 'src/server/Endpoints/Pages');
 const PUBLIC_DIR       = join(ROOT, 'public');
 const WRANGLER_URL     = (process.env.WRANGLER_URL ?? '').replace(/\/$/, '');
 
-// ── In-memory employee store (stand-in for Cloudflare D1) ─────────────────────
-
-type Employee = {
-  id: string; name: string; email: string;
-  department: string; role: string; status: string; joinedAt: string;
-};
-
-const employees = new Map<string, Employee>();
-const seed: Omit<Employee, 'id'>[] = [
-  { name: 'Alice Chen',     email: 'alice@example.com',   department: 'Engineering', role: 'Senior Engineer',    status: 'active',   joinedAt: '2022-03-14' },
-  { name: 'Bob Martinez',   email: 'bob@example.com',     department: 'Sales',       role: 'Account Executive',  status: 'active',   joinedAt: '2021-11-01' },
-  { name: 'Carol Williams', email: 'carol@example.com',   department: 'Design',      role: 'Product Designer',   status: 'active',   joinedAt: '2023-01-08' },
-  { name: 'David Lee',      email: 'david@example.com',   department: 'HR',          role: 'HR Manager',         status: 'active',   joinedAt: '2020-06-22' },
-  { name: 'Eva Johansson',  email: 'eva@example.com',     department: 'Marketing',   role: 'Content Strategist', status: 'inactive', joinedAt: '2021-04-15' },
-];
-for (const e of seed) {
-  const id = crypto.randomUUID();
-  employees.set(id, { ...e, id });
-}
-
-// Legacy user store — kept for /api/users compatibility
-type User = { id: string; name: string; createdAt: string };
-const users = new Map<string, User>();
-for (const name of ['Alice', 'Bob']) {
-  const id = crypto.randomUUID();
-  users.set(id, { id, name, createdAt: new Date().toISOString() });
-}
-
-// ── SSE hot-reload ────────────────────────────────────────────────────────────
-
-const sseClients = new Set<ReadableStreamDefaultController<Uint8Array>>();
-const enc = new TextEncoder();
-
-function broadcast(event: string, data: string) {
-  const chunk = enc.encode(`event: ${event}\ndata: ${data}\n\n`);
-  for (const ctrl of sseClients) {
-    try { ctrl.enqueue(chunk); } catch { sseClients.delete(ctrl); }
-  }
-}
-
-// ── FJSX on-demand compilation ─────────────────────────────────────────────────
+// ── FJSX compiler ──────────────────────────────────────────────────────────────
 
 function compileFjsx(name: string): string | null {
   const filePath = join(COMPONENTS_DIR, `${name}.fjsx`);
@@ -65,227 +24,111 @@ function compileFjsx(name: string): string | null {
   return compile(src, `${name}.fjsx`).js;
 }
 
-function compileServerPage(name: string): string | null {
-  const filePath = join(SERVER_PAGES_DIR, `${name}.fjsx`);
-  if (!existsSync(filePath)) return null;
-  const src = readFileSync(filePath, 'utf-8');
-  return compile(src, `${name}.fjsx`).js;
-}
+// ── SSE hot-reload ─────────────────────────────────────────────────────────────
 
-function ssrRender(js: string, component: Record<string, unknown>): string {
-  const cjs = js.replace(/^export /gm, '');
-  return new Function(`${cjs}; return renderToHtml;`)()(component);
-}
+const sseClients = new Set<ReadableStreamDefaultController>();
 
-// ── Wrangler proxy ─────────────────────────────────────────────────────────────
-
-async function proxyToWorker(req: Request, path: string, search: string): Promise<Response> {
-  const target = `${WRANGLER_URL}${path}${search}`;
-  try {
-    return await fetch(new Request(target, {
-      method:  req.method,
-      headers: req.headers,
-      body:    req.method !== 'GET' && req.method !== 'HEAD' ? req.body : undefined,
-    }));
-  } catch (e: any) {
-    return Response.json({ error: `Proxy error: ${e.message}`, target }, { status: 502 });
+function notifySse() {
+  for (const ctrl of sseClients) {
+    try { ctrl.enqueue('data: reload\n\n'); } catch { sseClients.delete(ctrl); }
   }
 }
 
-// ── Page rendering ─────────────────────────────────────────────────────────────
-
-function renderServerPage(name: string, data: Record<string, unknown>): string {
-  const js = compileServerPage(name);
-  if (!js) throw new Error(`Server page template '${name}.fjsx' not found`);
-  return ssrRender(js, data);
-}
-
-function pageShell(title: string, activePath: string, body: string): string {
-  return renderServerPage('Layout', {
-    title,
-    homeActive:  activePath === '/',
-    aboutActive: activePath === '/about',
-    body,
+if (existsSync(COMPONENTS_DIR)) {
+  watch(COMPONENTS_DIR, { persistent: false }, (_ev, filename) => {
+    if (filename?.endsWith('.fjsx')) notifySse();
   });
 }
 
-function flashBanner(url: URL): string {
-  const msg  = url.searchParams.get('_flash');
-  const type = url.searchParams.get('_type') ?? 'success';
-  if (!msg) return '';
-  return `<div class="flash flash-${type}">${msg}</div>`;
-}
-
-const DEPTS = ['Engineering', 'Design', 'Sales', 'Marketing', 'Operations', 'HR', 'Finance'];
-
-function deptChoices(current: string) {
-  return DEPTS.map(d => ({ value: d, isSelected: d === current }));
-}
-
-function employeeListPage(flash: string): string {
-  const list   = [...employees.values()].sort((a, b) => a.name.localeCompare(b.name));
-  const total  = list.length;
-  const active = list.filter(e => e.status === 'active').length;
-  const rows   = list.map(e => ({ ...e, isActive: e.status === 'active', editUrl: `/employees/${e.id}/edit` }));
-  const body   = renderServerPage('EmployeeList', { employees: rows, isEmpty: total === 0, total, active });
-  return pageShell('Employees', '/', flash + body);
-}
-
-// ── Static file helper ─────────────────────────────────────────────────────────
+// ── Static file server ─────────────────────────────────────────────────────────
 
 const MIME: Record<string, string> = {
-  '.html': 'text/html; charset=utf-8',
-  '.js':   'text/javascript',
-  '.css':  'text/css',
-  '.json': 'application/json',
-  '.ico':  'image/x-icon',
-  '.svg':  'image/svg+xml',
-  '.png':  'image/png',
-  '.webp': 'image/webp',
+  '.html': 'text/html', '.css': 'text/css', '.js': 'text/javascript',
+  '.png': 'image/png', '.jpg': 'image/jpeg', '.svg': 'image/svg+xml',
+  '.ico': 'image/x-icon', '.json': 'application/json',
 };
 
-function serveStatic(urlPath: string): Response | null {
-  const filePath = join(PUBLIC_DIR, urlPath === '/' ? 'index.html' : urlPath);
+function serveStatic(path: string): Response | null {
+  const filePath = join(PUBLIC_DIR, path === '/' ? 'index.html' : path);
   if (!existsSync(filePath)) return null;
+  const ext  = filePath.slice(filePath.lastIndexOf('.'));
   const body = readFileSync(filePath);
-  const ct   = MIME[extname(filePath)] ?? 'application/octet-stream';
-  return new Response(body, { headers: { 'Content-Type': ct } });
+  return new Response(body, { headers: { 'Content-Type': MIME[ext] ?? 'application/octet-stream' } });
 }
 
-const html = (body: string, status = 200) =>
-  new Response(body, { status, headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+function html(body: string, status = 200): Response {
+  return new Response(body, { status, headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+}
 
-const redirect = (location: string) =>
-  new Response(null, { status: 303, headers: { Location: location } });
+// ── Wrangler proxy ─────────────────────────────────────────────────────────────
 
-const redirectFlash = (location: string, type: string, msg: string) =>
-  redirect(`${location}?_flash=${encodeURIComponent(msg)}&_type=${type}`);
+async function proxyToWorker(req: Request, path: string, search: string): Promise<Response> {
+  const url = `${WRANGLER_URL}${path}${search}`;
+  return fetch(new Request(url, req));
+}
+
+// ── Welcome page ───────────────────────────────────────────────────────────────
+
+const welcomePage = `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>fff-stack — Ready</title>
+  <link rel="stylesheet" href="/style.css">
+  <style>
+    body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
+    .center { text-align: center; max-width: 520px; }
+    .logo { font-size: 2.5rem; font-weight: 800; letter-spacing: -1px; color: var(--fff-accent); margin-bottom: 0.25rem; }
+    .tagline { color: var(--fff-text-dim); margin-bottom: 2rem; }
+    pre { text-align: left; background: var(--fff-surface); border: 1px solid var(--fff-border); border-radius: 8px; padding: 1rem 1.25rem; font-size: 0.85rem; }
+    .step { color: var(--fff-text-dim); font-size: 0.8rem; margin-bottom: 0.25rem; }
+  </style>
+</head>
+<body>
+  <div class="center">
+    <div class="logo">FFF·Stack</div>
+    <p class="tagline">F# · FJSX · Cloudflare Workers</p>
+    <div class="card">
+      <p class="step">Start building — add routes in <code>src/server/Worker.fs</code>:</p>
+<pre>router
+    .Get("/hello", fun _ctx ->
+        promise { return Response.json {| message = "Hello!" |} })
+    |> ignore</pre>
+      <p class="step" style="margin-top:1.25rem">Or scaffold a feature with the fff CLI:</p>
+<pre>fff prototype TodoItem</pre>
+    </div>
+    <p style="margin-top:1.5rem;font-size:0.8rem;color:var(--fff-text-dim)">
+      Docs: <a href="https://github.com/Alcogy/fff-stack">github.com/Alcogy/fff-stack</a>
+    </p>
+  </div>
+  <script>
+    const es = new EventSource('/__sse');
+    es.onmessage = () => location.reload();
+  </script>
+</body>
+</html>`;
 
 // ── Request handler ────────────────────────────────────────────────────────────
 
-async function handler(req: Request): Promise<Response> {
+async function handleRequest(req: Request): Promise<Response> {
   const url    = new URL(req.url);
   const path   = url.pathname;
   const method = req.method.toUpperCase();
 
-  // SSE hot-reload
+  // SSE hot-reload endpoint
   if (path === '/__sse') {
-    let ctrl!: ReadableStreamDefaultController<Uint8Array>;
-    const stream = new ReadableStream<Uint8Array>({
-      start(c) { ctrl = c; c.enqueue(enc.encode('data: connected\n\n')); sseClients.add(c); },
+    let ctrl!: ReadableStreamDefaultController;
+    const stream = new ReadableStream({
+      start(c) { ctrl = c; sseClients.add(c); },
       cancel()  { sseClients.delete(ctrl); },
     });
     return new Response(stream, {
-      headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' },
+      headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache' },
     });
   }
 
-  // ── Page routes ────────────────────────────────────────────────────────────
-
-  // GET / — employee list
-  if (path === '/' && method === 'GET') {
-    return html(employeeListPage(flashBanner(url)));
-  }
-
-  // GET /employees/new — add employee form
-  if (path === '/employees/new' && method === 'GET') {
-    const body = renderServerPage('EmployeeNew', {});
-    return html(pageShell('Add Employee', '/', body));
-  }
-
-  // POST /employees — create employee (PRG)
-  if (path === '/employees' && method === 'POST') {
-    const form       = await req.formData();
-    const name       = (form.get('name') as string ?? '').trim();
-    const email      = (form.get('email') as string ?? '').trim().toLowerCase();
-    const department = (form.get('department') as string ?? '').trim();
-    const role       = (form.get('role') as string ?? '').trim();
-    const status     = form.get('status') === 'inactive' ? 'inactive' : 'active';
-
-    if (name.length < 2)  return redirectFlash('/', 'error', 'Name must be at least 2 characters');
-    if (!email.includes('@')) return redirectFlash('/', 'error', 'Invalid email address');
-    if (!department)       return redirectFlash('/', 'error', 'Department is required');
-    if (!role)             return redirectFlash('/', 'error', 'Job title is required');
-
-    const existing = [...employees.values()].find(e => e.email === email);
-    if (existing) return redirectFlash('/', 'error', `Email ${email} is already registered`);
-
-    const id = crypto.randomUUID();
-    const joined = new Date().toISOString().slice(0, 10);
-    employees.set(id, { id, name, email, department, role, status, joinedAt: joined });
-    return redirectFlash('/', 'success', `${name} has been added to the directory.`);
-  }
-
-  // GET /employees/:id/edit — edit employee form
-  const editMatch = path.match(/^\/employees\/([^/]+)\/edit$/);
-  if (editMatch && method === 'GET') {
-    const id  = editMatch[1];
-    const emp = employees.get(id);
-    if (!emp) return redirectFlash('/', 'error', 'Employee not found');
-    const body = renderServerPage('EmployeeEdit', {
-      id: emp.id, name: emp.name, email: emp.email,
-      role: emp.role, status: emp.status,
-      statusIsActive: emp.status === 'active',
-      departments: deptChoices(emp.department),
-    });
-    return html(pageShell('Edit Employee', '/', body));
-  }
-
-  // POST /employees/update — update employee (PRG)
-  if (path === '/employees/update' && method === 'POST') {
-    const form       = await req.formData();
-    const id         = form.get('id') as string ?? '';
-    const name       = (form.get('name') as string ?? '').trim();
-    const email      = (form.get('email') as string ?? '').trim().toLowerCase();
-    const department = (form.get('department') as string ?? '').trim();
-    const role       = (form.get('role') as string ?? '').trim();
-    const status     = form.get('status') === 'inactive' ? 'inactive' : 'active';
-
-    if (!employees.has(id)) return redirectFlash('/', 'error', 'Employee not found');
-    if (name.length < 2)    return redirectFlash('/', 'error', 'Name must be at least 2 characters');
-    if (!email.includes('@'))  return redirectFlash('/', 'error', 'Invalid email address');
-    if (!department)           return redirectFlash('/', 'error', 'Department is required');
-    if (!role)                 return redirectFlash('/', 'error', 'Job title is required');
-
-    const existing = [...employees.values()].find(e => e.email === email && e.id !== id);
-    if (existing) return redirectFlash('/', 'error', `Email ${email} is already registered`);
-
-    const prev = employees.get(id)!;
-    employees.set(id, { ...prev, name, email, department, role, status });
-    return redirectFlash('/', 'success', `${name} has been updated.`);
-  }
-
-  // POST /employees/delete — delete employee (PRG)
-  if (path === '/employees/delete' && method === 'POST') {
-    const form = await req.formData();
-    const id   = form.get('id') as string ?? '';
-    const emp  = employees.get(id);
-    if (!emp) return redirectFlash('/', 'error', 'Employee not found');
-    employees.delete(id);
-    return redirectFlash('/', 'success', `${emp.name} has been removed.`);
-  }
-
-  // GET /about
-  if (path === '/about' && method === 'GET') {
-    const body = renderServerPage('About', {});
-    return html(pageShell('About', '/about', body));
-  }
-
-  // SSR demo: /ssr/:ComponentName?Prop=value
-  if (path.startsWith('/ssr/')) {
-    const name = path.slice(5);
-    const js   = compileFjsx(name);
-    if (!js) return new Response(`<!-- template '${name}' not found -->`, { status: 404, headers: { 'Content-Type': 'text/html' } });
-    const component: Record<string, unknown> = {};
-    url.searchParams.forEach((v, k) => { const n = Number(v); component[k] = isNaN(n) ? v : n; });
-    try {
-      return new Response(ssrRender(js, component), { headers: { 'Content-Type': 'text/html; charset=utf-8' } });
-    } catch (e: any) {
-      return new Response(`<!-- SSR error: ${e.message} -->`, { status: 500, headers: { 'Content-Type': 'text/html' } });
-    }
-  }
-
-  // FJSX → JS on demand (client components)
+  // FJSX client components on demand
   if (path.startsWith('/templates/') && path.endsWith('.js')) {
     const name = basename(path, '.js');
     const js   = compileFjsx(name);
@@ -293,127 +136,41 @@ async function handler(req: Request): Promise<Response> {
     return new Response(js, { headers: { 'Content-Type': 'text/javascript' } });
   }
 
-  // API routes
-  if (path.startsWith('/api/')) {
-    return WRANGLER_URL ? proxyToWorker(req, path, url.search) : handleMockApi(req, path, method);
+  // Proxy /api/* to wrangler dev when WRANGLER_URL is set
+  if (path.startsWith('/api/') && WRANGLER_URL) {
+    return proxyToWorker(req, path, url.search);
   }
 
-  // Static files from template/public/
+  // Static files
   const staticRes = serveStatic(path);
   if (staticRes) return staticRes;
 
-  // 404
-  const body404 = `<section class="card">
-    <div class="card-label">404</div>
-    <h2>Page not found</h2>
-    <p class="text-muted" style="margin-top:0.5rem">The page you were looking for doesn't exist.</p>
-    <a href="/" class="btn btn-primary" style="display:inline-block;margin-top:1.25rem">← Back to Employees</a>
-  </section>`;
-  return html(pageShell('Not Found', '', body404), 404);
-}
-
-// ── In-memory mock API ─────────────────────────────────────────────────────────
-
-async function handleMockApi(req: Request, path: string, method: string): Promise<Response> {
-  // Employees
-  if (path === '/api/employees' && method === 'GET')
-    return Response.json([...employees.values()].sort((a, b) => a.name.localeCompare(b.name)));
+  // Welcome page
+  if (path === '/') return html(welcomePage);
 
-  if (path === '/api/employees' && method === 'POST') {
-    const body = await req.json() as Partial<Employee>;
-    const name = (body?.name ?? '').trim();
-    const email = (body?.email ?? '').trim().toLowerCase();
-    if (name.length < 2)    return Response.json({ error: 'Name must be at least 2 characters' }, { status: 400 });
-    if (!email.includes('@')) return Response.json({ error: 'Invalid email address' }, { status: 400 });
-    const id = crypto.randomUUID();
-    const emp: Employee = {
-      id, name, email,
-      department: body?.department ?? '',
-      role:       body?.role ?? '',
-      status:     body?.status === 'inactive' ? 'inactive' : 'active',
-      joinedAt:   new Date().toISOString().slice(0, 10),
-    };
-    employees.set(id, emp);
-    return Response.json(emp, { status: 201 });
-  }
-
-  const empDel = path.match(/^\/api\/employees\/([^/]+)$/);
-  if (empDel && method === 'DELETE') {
-    const id = empDel[1];
-    if (!employees.has(id)) return Response.json({ error: 'Employee not found' }, { status: 404 });
-    employees.delete(id);
-    return new Response(null, { status: 204 });
-  }
-
-  // Legacy users API
-  if (path === '/api/users' && method === 'GET')
-    return Response.json([...users.values()].sort((a, b) => b.createdAt.localeCompare(a.createdAt)));
-
-  if (path === '/api/users' && method === 'POST') {
-    const body = await req.json() as { name?: string };
-    const name = (body?.name ?? '').trim();
-    if (name.length < 2)   return Response.json({ error: 'Name must be at least 2 characters' }, { status: 400 });
-    if (name.length > 100) return Response.json({ error: 'Name too long' }, { status: 400 });
-    const id   = crypto.randomUUID();
-    const user: User = { id, name, createdAt: new Date().toISOString() };
-    users.set(id, user);
-    return Response.json(user, { status: 201 });
-  }
-
-  const userDel = path.match(/^\/api\/users\/([^/]+)$/);
-  if (userDel && method === 'DELETE') {
-    const id = userDel[1];
-    if (!users.has(id)) return Response.json({ error: 'User not found' }, { status: 404 });
-    users.delete(id);
-    return new Response(null, { status: 204 });
-  }
-
-  return Response.json({ error: `No mock route: ${method} ${path}` }, { status: 404 });
-}
-
-// ── Start server ───────────────────────────────────────────────────────────────
-
-function startServer(port: number): ReturnType<typeof Bun.serve> {
-  try {
-    return Bun.serve({ port, fetch: handler });
-  } catch (e: any) {
-    if (e?.code === 'EADDRINUSE') {
-      console.warn(`  port ${port} in use, trying ${port + 1}…`);
-      return startServer(port + 1);
-    }
-    throw e;
-  }
+  return html('<h2>404 — Not found</h2>', 404);
 }
 
-const server = startServer(PREFERRED_PORT);
+// ── Server ─────────────────────────────────────────────────────────────────────
 
-if (existsSync(COMPONENTS_DIR)) {
-  watch(COMPONENTS_DIR, { persistent: false }, (_ev, filename) => {
-    if (filename?.endsWith('.fjsx')) {
-      console.log(`  [HMR] ${filename} changed`);
-      broadcast('reload', JSON.stringify({ template: basename(filename, '.fjsx') }));
-    }
-  });
-}
-
-if (existsSync(SERVER_PAGES_DIR)) {
-  watch(SERVER_PAGES_DIR, { persistent: false }, (_ev, filename) => {
-    if (filename?.endsWith('.fjsx')) {
-      console.log(`  [page] ${filename} changed — reloading`);
-      broadcast('reload', JSON.stringify({ template: basename(filename, '.fjsx'), fullReload: true }));
+function tryPort(port: number): Promise<number> {
+  return new Promise((resolve, reject) => {
+    try {
+      Bun.serve({ port, fetch: handleRequest });
+      resolve(port);
+    } catch {
+      resolve(tryPort(port + 1));
     }
   });
 }
 
-const apiMode = WRANGLER_URL
-  ? `proxy → ${WRANGLER_URL}`
-  : 'in-memory mock (set WRANGLER_URL to proxy to wrangler dev)';
-
-console.log(`
+tryPort(PREFERRED_PORT).then(port => {
+  console.log(`
   ███████╗███████╗███████╗
   ██╔════╝██╔════╝██╔════╝   fff-stack dev server
-  █████╗  █████╗  █████╗     http://localhost:${server.port}
+  █████╗  █████╗  █████╗     http://localhost:${port}
   ██╔══╝  ██╔══╝  ██╔══╝
   ██║     ██║     ██║        FJSX hot-reload enabled
-  ╚═╝     ╚═╝     ╚═╝        API: ${apiMode}
+  ╚═╝     ╚═╝     ╚═╝        ${WRANGLER_URL ? `API → ${WRANGLER_URL}` : 'set WRANGLER_URL to proxy /api/* to wrangler dev'}
 `);
+});

package/template/migrations/0001_init.sql

@@ -1,25 +1,9 @@
--- Initial schema: users and posts tables
+-- Initial schema
 -- Applied automatically by: bun run migrate
 
-CREATE TABLE IF NOT EXISTS users (
-  id         TEXT PRIMARY KEY,
-  name       TEXT NOT NULL,
-  created_at TEXT NOT NULL DEFAULT (datetime('now'))
-);
-
-CREATE INDEX IF NOT EXISTS idx_users_created_at ON users(created_at);
-
-CREATE TABLE IF NOT EXISTS posts (
-  id           TEXT PRIMARY KEY,
-  author_id    TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
-  title        TEXT NOT NULL,
-  slug         TEXT NOT NULL UNIQUE,
-  body         TEXT NOT NULL,
-  published_at TEXT,
-  created_at   TEXT NOT NULL DEFAULT (datetime('now')),
-  updated_at   TEXT NOT NULL DEFAULT (datetime('now'))
-);
-
-CREATE INDEX IF NOT EXISTS idx_posts_slug       ON posts(slug);
-CREATE INDEX IF NOT EXISTS idx_posts_author_id  ON posts(author_id);
-CREATE INDEX IF NOT EXISTS idx_posts_created_at ON posts(created_at);
+-- Add your tables here. Example:
+-- CREATE TABLE IF NOT EXISTS items (
+--   id         TEXT PRIMARY KEY,
+--   name       TEXT NOT NULL,
+--   created_at TEXT NOT NULL DEFAULT (datetime('now'))
+-- );

package/template/package.json

@@ -4,20 +4,20 @@
   "private": true,
   "type": "module",
   "scripts": {
+    "setup": "bun install && dotnet tool restore",
     "demo":  "bun run dev-server.ts",
-    "build": "bun run build:assets && bun run build:templates && bun run build:page-templates && bun run build:client && bun run build:server",
-    "build:assets": "node -e \"require('fs').mkdirSync('dist/client',{recursive:true});require('fs').cpSync('public','dist/client',{recursive:true,force:true})\"",
+    "build": "bun run build:assets && bun run build:templates && bun run build:client && bun run build:server",
+    "build:assets":    "node -e \"require('fs').mkdirSync('dist/client',{recursive:true});require('fs').cpSync('public','dist/client',{recursive:true,force:true})\"",
     "build:templates": "fjsx --dir src/client --out dist/client/templates",
-    "build:page-templates": "fjsx --dir src/server/Endpoints/Pages --out dist/server/Pages",
-    "dev:templates":      "fjsx-watcher --dir src/client --out dist/client/templates",
-    "dev:page-templates": "fjsx-watcher --dir src/server/Endpoints/Pages --out dist/server/Pages",
-    "build:client": "dotnet fable src/client/Client.fsproj --outDir dist/client/fable --noCache && bun build dist/client/fable/App.js --outdir dist/client --entry-naming bundle.js",
-    "build:server": "dotnet fable src/server/Server.fsproj --outDir dist/server",
-    "build:wrangler": "bun run build:assets && bun run build:templates && bun run build:page-templates && bun run build:server",
-    "dev": "bun run build:client && concurrently \"bun run dev:templates\" \"bun run dev:page-templates\" \"bun run dev:client\" \"wrangler dev\"",
-    "dev:client": "dotnet fable src/client/Client.fsproj --watch --outDir dist/client/fable",
-    "deploy": "wrangler deploy",
-    "migrate": "bun run migrate.ts",
+    "build:client":    "dotnet fable src/client/Client.fsproj --outDir dist/client/fable --noCache && bun build dist/client/fable/App.js --outdir dist/client --entry-naming bundle.js",
+    "build:server":    "dotnet fable src/server/Server.fsproj --outDir dist/server --noCache",
+    "build:wrangler":  "bun run build:assets && bun run build:templates && bun run build:server",
+    "dev": "bun run build:client && concurrently \"bun run dev:templates\" \"bun run dev:client\" \"bun run dev:bundle\" \"wrangler dev\"",
+    "dev:templates": "fjsx-watcher --dir src/client --out dist/client/templates",
+    "dev:client":    "dotnet fable src/client/Client.fsproj --watch --outDir dist/client/fable",
+    "dev:bundle":    "bun build --watch dist/client/fable/App.js --outdir dist/client --entry-naming bundle.js",
+    "deploy":        "wrangler deploy",
+    "migrate":       "bun run migrate.ts",
     "migrate:remote": "bun run migrate.ts --remote",
     "migrate:status": "bun run migrate.ts --status"
   },