create-fff-app 0.1.0

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "create-fff-app",
+  "version": "0.1.0",
+  "description": "Scaffold a new fff-stack project",
+  "bin": {
+    "create-fff-app": "src/index.ts"
+  },
+  "files": [
+    "src",
+    "template"
+  ],
+  "scripts": {
+    "build": "bun build src/index.ts --outfile dist/index.js --target node",
+    "prepublishOnly": "bun run scripts/prepare-template.ts",
+    "test": "bun test"
+  },
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "@types/node": "^20.0.0"
+  }
+}

package/src/index.ts

@@ -0,0 +1,119 @@
+#!/usr/bin/env bun
+/**
+ * create-fff-app — scaffold a new fff-stack project
+ *
+ * Usage:
+ *   bunx create-fff-app my-app
+ *   bun create fff-app my-app
+ */
+
+import { existsSync, mkdirSync, readdirSync, readFileSync, statSync, writeFileSync } from 'fs';
+import { join, relative, dirname } from 'path';
+import { execSync } from 'child_process';
+
+// Prefer the template bundled alongside this package (npm published).
+// Fall back to the monorepo layout for local development.
+const bundledTemplate  = join(import.meta.dir, '../template');
+const monorepTemplate  = join(import.meta.dir, '../../../template');
+const TEMPLATE_DIR     = existsSync(bundledTemplate) ? bundledTemplate : monorepTemplate;
+const SKIP_DIRS    = new Set(['obj', 'bin', 'node_modules', '.git', 'dist']);
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+
+function copyDir(src: string, dest: string, projectName: string) {
+  const entries = readdirSync(src, { withFileTypes: true });
+  mkdirSync(dest, { recursive: true });
+
+  for (const entry of entries) {
+    if (SKIP_DIRS.has(entry.name)) continue;
+
+    const srcPath  = join(src, entry.name);
+    const destPath = join(dest, entry.name);
+
+    if (entry.isDirectory()) {
+      copyDir(srcPath, destPath, projectName);
+    } else {
+      const raw = readFileSync(srcPath, 'utf-8');
+      // Replace template project name placeholder
+      const content = raw.replace(/fff-stack-app/g, projectName);
+      mkdirSync(dirname(destPath), { recursive: true });
+      writeFileSync(destPath, content, 'utf-8');
+    }
+  }
+}
+
+function bold(s: string) { return `\x1b[1m${s}\x1b[0m`; }
+function green(s: string) { return `\x1b[32m${s}\x1b[0m`; }
+function cyan(s: string)  { return `\x1b[36m${s}\x1b[0m`; }
+function dim(s: string)   { return `\x1b[2m${s}\x1b[0m`; }
+
+// ── CLI ───────────────────────────────────────────────────────────────────────
+
+const args = process.argv.slice(2);
+
+if (args.length === 0 || args[0] === '--help' || args[0] === '-h') {
+  console.log(`
+  ${bold('create-fff-app')} — scaffold a new fff-stack project
+
+  ${bold('Usage:')}
+    bunx create-fff-app ${cyan('<project-name>')}
+
+  ${bold('Example:')}
+    bunx create-fff-app my-workers-app
+`);
+  process.exit(args.length === 0 ? 1 : 0);
+}
+
+const rawName   = args[0].trim();
+const projectName = rawName.replace(/[^a-z0-9\-_]/gi, '-').toLowerCase();
+const targetDir   = join(process.cwd(), rawName);
+
+if (existsSync(targetDir)) {
+  console.error(`\n  Error: directory '${rawName}' already exists.\n`);
+  process.exit(1);
+}
+
+if (!existsSync(TEMPLATE_DIR)) {
+  console.error(`\n  Error: template directory not found at ${TEMPLATE_DIR}\n`);
+  process.exit(1);
+}
+
+console.log(`\n  Creating ${bold(projectName)}…\n`);
+
+// Copy template
+copyDir(TEMPLATE_DIR, targetDir, projectName);
+console.log(`  ${green('✓')} Scaffolded project files`);
+
+// Git init
+try {
+  execSync('git init', { cwd: targetDir, stdio: 'ignore' });
+  execSync('git add -A', { cwd: targetDir, stdio: 'ignore' });
+  execSync(`git commit -m "Initial scaffold from create-fff-app"`, { cwd: targetDir, stdio: 'ignore' });
+  console.log(`  ${green('✓')} Initialized git repository`);
+} catch {
+  console.log(`  ${dim('⚠ git init skipped (git not available)')}`);
+}
+
+// Print next steps
+console.log(`
+  ${green('✓')} Done! Your project is at ${bold(rawName)}/
+
+  ${bold('Next steps:')}
+
+    ${cyan(`cd ${rawName}`)}
+
+    ${dim('# Install JS dependencies')}
+    ${cyan('bun install')}
+
+    ${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')}
+
+    ${dim('# Start the full dev stack')}
+    ${cyan('bun dev')}
+
+  ${bold('Docs:')} https://github.com/Alcogy/fff-stack
+`);

package/template/.config/dotnet-tools.json

@@ -0,0 +1,5 @@
+{
+  "version": 1,
+  "isRoot": true,
+  "tools": {}
+}

package/template/dev-server.ts

@@ -0,0 +1,415 @@
+#!/usr/bin/env bun
+/**
+ * fff-stack dev server — runs the template demo without .NET/Fable.
+ *
+ *   bun run demo                          # in-memory mock API
+ *   WRANGLER_URL=http://localhost:8787 bun run demo  # proxy to wrangler dev
+ */
+import { compile } from '@fff-stack/fjsx-compiler';
+import { readFileSync, existsSync, watch } from 'fs';
+import { join, extname, 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 ─────────────────────────────────────────────────
+
+function compileFjsx(name: string): string | null {
+  const filePath = join(COMPONENTS_DIR, `${name}.fjsx`);
+  if (!existsSync(filePath)) return null;
+  const src = readFileSync(filePath, 'utf-8');
+  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;
+}
+
+function ssrRender(js: string, component: Record<string, unknown>): string {
+  const cjs = js.replace(/^export /gm, '');
+  return new Function(`${cjs}; return renderToHtml;`)()(component);
+}
+
+// ── 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 });
+  }
+}
+
+// ── 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,
+  });
+}
+
+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 ─────────────────────────────────────────────────────────
+
+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',
+};
+
+function serveStatic(urlPath: string): Response | null {
+  const filePath = join(PUBLIC_DIR, urlPath === '/' ? 'index.html' : urlPath);
+  if (!existsSync(filePath)) return null;
+  const body = readFileSync(filePath);
+  const ct   = MIME[extname(filePath)] ?? 'application/octet-stream';
+  return new Response(body, { headers: { 'Content-Type': ct } });
+}
+
+const html = (body: string, status = 200) =>
+  new Response(body, { status, headers: { 'Content-Type': 'text/html; charset=utf-8' } });
+
+const redirect = (location: string) =>
+  new Response(null, { status: 303, headers: { Location: location } });
+
+const redirectFlash = (location: string, type: string, msg: string) =>
+  redirect(`${location}?_flash=${encodeURIComponent(msg)}&_type=${type}`);
+
+// ── Request handler ────────────────────────────────────────────────────────────
+
+async function handler(req: Request): Promise<Response> {
+  const url    = new URL(req.url);
+  const path   = url.pathname;
+  const method = req.method.toUpperCase();
+
+  // SSE hot-reload
+  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); },
+      cancel()  { sseClients.delete(ctrl); },
+    });
+    return new Response(stream, {
+      headers: { 'Content-Type': 'text/event-stream', 'Cache-Control': 'no-cache', 'Connection': 'keep-alive' },
+    });
+  }
+
+  // ── 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)
+  if (path.startsWith('/templates/') && path.endsWith('.js')) {
+    const name = basename(path, '.js');
+    const js   = compileFjsx(name);
+    if (!js) return new Response('// template not found', { status: 404, headers: { 'Content-Type': 'text/javascript' } });
+    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);
+  }
+
+  // Static files from template/public/
+  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)));
+
+  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;
+  }
+}
+
+const server = startServer(PREFERRED_PORT);
+
+watch(COMPONENTS_DIR, { persistent: false }, (_ev, filename) => {
+  if (filename?.endsWith('.fjsx')) {
+    console.log(`  [HMR] ${filename} changed`);
+    broadcast('reload', JSON.stringify({ template: basename(filename, '.fjsx') }));
+  }
+});
+
+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 }));
+  }
+});
+
+const apiMode = WRANGLER_URL
+  ? `proxy → ${WRANGLER_URL}`
+  : 'in-memory mock (set WRANGLER_URL to proxy to wrangler dev)';
+
+console.log(`
+  ███████╗███████╗███████╗
+  ██╔════╝██╔════╝██╔════╝   fff-stack dev server
+  █████╗  █████╗  █████╗     http://localhost:${server.port}
+  ██╔══╝  ██╔══╝  ██╔══╝
+  ██║     ██║     ██║        FJSX hot-reload enabled
+  ╚═╝     ╚═╝     ╚═╝        API: ${apiMode}
+`);

package/template/index.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>fff-stack app</title>
+  <link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+
+  <main class="container">
+    <h1>fff-stack</h1>
+
+    <!-- Counter component mounts here -->
+    <section id="counter-root"></section>
+
+    <!-- UserList component mounts here -->
+    <section id="user-list-root"></section>
+  </main>
+
+  <script type="module" src="/bundle.js"></script>
+</body>
+</html>