statikapi 0.1.4 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "statikapi",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/zonayedpca/statikapi",
@@ -17,7 +17,9 @@
   "keywords": ["static", "json", "api", "cli", "ssg"],
   "publishConfig": { "access": "public", "provenance": true },
   "dependencies": {
-    "chokidar": "^3.6.0"
+    "chokidar": "^3.6.0",
+    "sirv": "^2.0.4",
+    "polka": "^0.5.2"
   },
   "scripts": {
     "build": "node ./scripts/build.js || true",

package/src/commands/dev.js

@@ -1,7 +1,10 @@
 import chokidar from 'chokidar';
 import path from 'node:path';
 import fs from 'node:fs/promises';
+import fss from 'node:fs'; // NEW: for createReadStream
 import crypto from 'node:crypto';
+import http from 'node:http'; // NEW: tiny HTTP server
+import { fileURLToPath } from 'node:url'; // NEW: resolve UI dist
 
 import { loadConfig } from '../config/loadConfig.js';
 import { loadModuleValue } from '../loader/loadModuleValue.js';
@@ -11,6 +14,12 @@ import { readFlags } from '../util/readFlags.js';
 import { writeFileEnsured } from '../util/fsx.js';
 import { routeToOutPath } from '../build/routeOutPath.js';
 
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+function hasIndex(dir) {
+  return fss.existsSync(path.join(dir, 'index.html'));
+}
+
 function clearScreen() {
   process.stdout.write('\x1Bc'); // ANSI "clear screen"
 }
@@ -57,20 +66,28 @@ export default async function devCmd(argv) {
   const { config } = await loadConfig({ flags });
 
   // Where to notify preview
-  const previewHost = String(flags.previewHost ?? '127.0.0.1');
-  const previewPort = Number.isFinite(flags.previewPort) ? Number(flags.previewPort) : 8788;
-  const notifyOrigin = `http://${previewHost}:${previewPort}`;
-
-  async function notifyChanged(route) {
-    try {
-      // Node 18+ has global fetch
-      const u = `${notifyOrigin}/_ui/changed?route=${encodeURIComponent(route)}`;
-
-      await fetch(u, { method: 'POST' }).catch(() => {});
-    } catch {
-      // Ignore if preview isn't running
+  // NEW: dev server + UI defaults
+  const host = String(flags.host ?? '127.0.0.1');
+  const port = Number.isFinite(flags.port) ? Number(flags.port) : 8788;
+  const noUi = !!(flags['no-ui'] || flags.noUi);
+  const noOpen = !!(flags['no-open'] || flags.noOpen);
+
+  // NEW: live SSE clients
+  const sseClients = new Set(); // each entry: { id, res }
+  function sseBroadcast(msg) {
+    const line = `data: ${msg}\n\n`;
+    for (const c of sseClients) {
+      try {
+        c.res.write(line);
+      } catch {
+        /* ignore */
+      }
     }
   }
+  async function notifyChanged(route) {
+    // Push to connected UIs
+    sseBroadcast(`changed:${route}`);
+  }
 
   // Cache of outputs per source file (for deletions on subsequent rebuilds)
   const lastEmitted = new Map(); // fileAbs -> Set<concreteRoute>
@@ -252,6 +269,116 @@ export default async function devCmd(argv) {
   await writeManifest();
   console.log(`[statikapi] ready. Watching ${path.relative(process.cwd(), config.paths.srcAbs)}/`);
 
+  // NEW: start HTTP server (UI + JSON helpers + SSE)
+  const server = http.createServer(async (req, res) => {
+    try {
+      let url;
+      try {
+        url = new URL(req.url || '/', `http://${host}:${port}`);
+      } catch {
+        // Extremely defensive fallback
+        url = new URL('/', `http://${host}:${port}`);
+      }
+      const pathname = url.pathname;
+
+      // 1) SSE: /_ui/events
+      if (pathname === '/_ui/events') {
+        res.writeHead(200, {
+          'Content-Type': 'text/event-stream',
+          'Cache-Control': 'no-cache',
+          Connection: 'keep-alive',
+          'X-Accel-Buffering': 'no', // for proxies
+        });
+        res.write('\n');
+        const client = { id: Date.now() + Math.random(), res };
+        sseClients.add(client);
+        req.on('close', () => sseClients.delete(client));
+        return;
+      }
+
+      // 2) Manifest JSON for UI: /ui/index
+      if (pathname === '/ui/index' && req.method === 'GET') {
+        const list = Array.from(manifestByRoute.values()).sort((a, b) =>
+          a.route.localeCompare(b.route)
+        );
+        const body = JSON.stringify(list);
+        res.writeHead(200, { 'Content-Type': 'application/json; charset=utf-8' });
+        res.end(body);
+        return;
+      }
+
+      // 3) Serve built file content: /_ui/file?route=/path
+      if (pathname === '/_ui/file' && req.method === 'GET') {
+        const route = url.searchParams.get('route') || '';
+        const outFile = routeToOutPath({ outAbs: config.paths.outAbs, route });
+        // best-effort headers
+        res.setHeader('Content-Type', 'application/json; charset=utf-8');
+        try {
+          const rs = fss.createReadStream(outFile);
+          rs.on('error', () => {
+            res.statusCode = 404;
+            res.end(`Not found: ${route}`);
+          });
+          rs.pipe(res);
+        } catch {
+          res.statusCode = 404;
+          res.end(`Not found: ${route}`);
+        }
+        return;
+      }
+
+      // 4) Static React UI at /_ui/* (unless --no-ui)
+      if (!noUi && pathname.startsWith('/_ui/')) {
+        const uiRoot = resolveUiDist();
+        const rel = pathname.replace(/^\/_ui\//, '') || 'index.html';
+        const file = path.join(uiRoot, rel);
+        if (!file.startsWith(uiRoot)) {
+          res.statusCode = 403;
+          res.end('Forbidden');
+          return;
+        }
+        try {
+          const stat = await fs.stat(file);
+          if (stat.isDirectory()) {
+            // try index.html inside subdir
+            const idx = path.join(file, 'index.html');
+            await fs.access(idx);
+            streamFile(idx, res);
+          } else {
+            streamFile(file, res);
+          }
+        } catch {
+          // Fallback to index.html for SPA routes
+          const fallback = path.join(uiRoot, 'index.html');
+          streamFile(fallback, res);
+        }
+        return;
+      }
+
+      // 5) Root → redirect to UI (unless --no-ui)
+      if (!noUi && pathname === '/') {
+        res.writeHead(302, { Location: '/_ui/' });
+        res.end();
+        return;
+      }
+
+      // Otherwise: 404
+      res.statusCode = 404;
+      res.end('Not Found');
+    } catch (e) {
+      console.log(e);
+      res.statusCode = 500;
+      res.end('Internal Server Error');
+    }
+  });
+
+  server.listen(port, host, () => {
+    console.log(`statikapi dev → serving on http://${host}:${port}${noUi ? '' : '/_ui/'}`);
+    if (!noUi && !noOpen) {
+      openInBrowser(`http://${host}:${port}/_ui/`).catch(() => {});
+    }
+  });
+
   const watcher = chokidar.watch(config.paths.srcAbs, {
     ignoreInitial: true,
     ignored: (p) => path.basename(p).startsWith('_'),
@@ -263,10 +390,62 @@ export default async function devCmd(argv) {
 
   // Keep process alive until SIGINT
   await new Promise((resolve) => {
-    const stop = () => watcher.close().then(resolve).catch(resolve);
+    const stop = () =>
+      Promise.allSettled([watcher.close(), new Promise((r) => server.close(() => r()))]).then(() =>
+        resolve()
+      );
     process.on('SIGINT', stop);
     process.on('SIGTERM', stop);
   });
 
   return 0;
 }
+
+// NEW: helpers (static file & UI dist resolver & opener)
+function streamFile(file, res) {
+  const ext = path.extname(file).toLowerCase();
+  const ctype =
+    ext === '.html'
+      ? 'text/html; charset=utf-8'
+      : ext === '.js'
+        ? 'text/javascript; charset=utf-8'
+        : ext === '.css'
+          ? 'text/css; charset=utf-8'
+          : ext === '.json'
+            ? 'application/json; charset=utf-8'
+            : ext === '.svg'
+              ? 'image/svg+xml'
+              : ext === '.map'
+                ? 'application/json; charset=utf-8'
+                : 'application/octet-stream';
+  res.setHeader('Content-Type', ctype);
+  fss.createReadStream(file).pipe(res);
+}
+
+function resolveUiDist() {
+  // 0) Optional override for power users
+  const fromEnv = process.env.STATIKAPI_UI_DIR;
+  if (fromEnv && hasIndex(fromEnv)) return fromEnv;
+
+  // 1) Bundled with the CLI: packages/cli/ui/  (your screenshot)
+  const bundled = path.resolve(__dirname, '..', '..', 'ui');
+  if (hasIndex(bundled)) return bundled;
+
+  // 2) Monorepo dev fallback: packages/ui/dist
+  const monorepoDist = path.resolve(__dirname, '..', '..', '..', 'ui', 'dist');
+  if (hasIndex(monorepoDist)) return monorepoDist;
+
+  // 3) Last resort: throw with a helpful hint
+  throw new Error(
+    'StatikAPI UI build not found. ' +
+      'Either keep a built UI at packages/cli/ui/ (index.html present), ' +
+      'or run: pnpm -w --filter @statikapi/ui build'
+  );
+}
+
+async function openInBrowser(url) {
+  const { exec } = await import('node:child_process');
+  const cmd =
+    process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+  exec(`${cmd} "${url}"`);
+}

package/src/commands/preview.js

@@ -1,326 +1,7 @@
-import http from 'node:http';
-import fs from 'node:fs/promises';
-import fss from 'node:fs';
-import path from 'node:path';
-import crypto from 'node:crypto';
-import { URL, fileURLToPath } from 'node:url';
-
-import { loadConfig } from '../config/loadConfig.js';
-import { readFlags } from '../util/readFlags.js';
-import { routeToOutPath } from '../build/routeOutPath.js';
+import devCmd from './dev.js';
 
 export default async function previewCmd(argv) {
-  // Keep old tests green: in non-TTY (node --test), behave like stub and exit.
-  if (!process.stdout.isTTY) {
-    console.log('statikapi preview → previewing built JSON (stub)');
-
-    return 0;
-  }
-
-  const flags = readFlags(argv || []);
-  const host = String(flags.host ?? '127.0.0.1');
-  const port = Number.isFinite(flags.port) ? Number(flags.port) : 8788;
-  const autoOpen = flags.open === true;
-
-  const { config } = await loadConfig({ flags });
-
-  // --- React UI defaults ---
-  // Prefer --uiDir; else use embedded UI inside this package; else proxy to Vite dev.
-  const here = path.dirname(fileURLToPath(import.meta.url)); // .../packages/cli/src/commands
-  const embeddedUi = path.resolve(here, '../../ui'); // .../packages/cli/ui
-  const uiDir = flags.uiDir ? path.resolve(String(flags.uiDir)) : embeddedUi;
-  const hasUi = uiDir && fss.existsSync(uiDir);
-
-  const uiDevHost = String(flags.uiDevHost ?? '127.0.0.1');
-  const uiDevPort = Number.isFinite(flags.uiDevPort) ? Number(flags.uiDevPort) : 5173;
-
-  const MIME = {
-    '.html': 'text/html; charset=utf-8',
-    '.js': 'application/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',
-    '.jpeg': 'image/jpeg',
-    '.ico': 'image/x-icon',
-    '.map': 'application/json',
-  };
-
-  const outDir = config.paths.outAbs;
-  const manifestPath = path.join(outDir, '.statikapi', 'manifest.json');
-
-  const send = (res, code, body, headers = {}) => {
-    const h = {
-      'Cache-Control': 'no-store',
-      ...headers,
-    };
-
-    res.writeHead(code, h);
-
-    if (body && (typeof body === 'string' || Buffer.isBuffer(body))) res.end(body);
-    else res.end();
-  };
-
-  const notFound = (res, msg = 'Not found') =>
-    send(res, 404, JSON.stringify({ error: msg }) + '\n', {
-      'Content-Type': 'application/json; charset=utf-8',
-    });
-
-  const badReq = (res, msg) =>
-    send(res, 400, JSON.stringify({ error: msg }) + '\n', {
-      'Content-Type': 'application/json; charset=utf-8',
-    });
-
-  const etag = (buf) => `"sha1-${crypto.createHash('sha1').update(buf).digest('hex')}"`;
-
-  async function readManifest() {
-    try {
-      const raw = await fs.readFile(manifestPath);
-      return raw;
-    } catch {
-      return Buffer.from('[]', 'utf8');
-    }
-  }
-
-  // --- SSE: subscribers/broadcast ---
-  const clients = new Set(); // Set<http.ServerResponse>
-
-  function sseSend(res, data) {
-    // default "message" event with one data line
-    res.write(`data: ${data}\n\n`);
-  }
-
-  function broadcast(data) {
-    for (const res of clients) {
-      try {
-        sseSend(res, data);
-      } catch {
-        /* ignore */
-      }
-    }
-  }
-
-  // Simple proxy to Vite dev server (only used if no built UI is found)
-  async function proxyUi(req, res, uiPathname) {
-    const httpMod = uiDevHost.startsWith('https')
-      ? await import('node:https')
-      : await import('node:http');
-    const client = uiDevHost.startsWith('https') ? httpMod.default : httpMod.default;
-    const targetPath =
-      uiPathname + (req.url.includes('?') ? req.url.slice(req.url.indexOf('?')) : '');
-    const opts = {
-      hostname: uiDevHost,
-      port: uiDevPort,
-      method: req.method || 'GET',
-      path: targetPath,
-      headers: req.headers,
-    };
-    const p = client.request(opts, (up) => {
-      const headers = { ...up.headers };
-      // Always no-store for UI assets
-      headers['cache-control'] = 'no-store';
-      res.writeHead(up.statusCode || 502, headers);
-      up.pipe(res);
-    });
-    p.on('error', () => {
-      const msg = `StatikAPI UI dev server not found at http://${uiDevHost}:${uiDevPort}. Start it with: pnpm -w --filter packages/ui dev`;
-      res.writeHead(502, {
-        'Content-Type': 'text/plain; charset=utf-8',
-        'Cache-Control': 'no-store',
-      });
-      res.end(msg);
-    });
-    if (req.readable) req.pipe(p);
-    else p.end();
-  }
-
-  async function tryServeFrom(rootDir, reqPath, { spaFallback = null } = {}) {
-    const target = path.normalize(path.join(rootDir, reqPath.replace(/^\/+/, '')));
-    if (!target.startsWith(rootDir)) return null; // path traversal guard
-    try {
-      const st = await fs.stat(target);
-      if (st.isDirectory()) {
-        const idx = path.join(target, 'index.html');
-        const buf = await fs.readFile(idx);
-        return { buf, ctype: MIME['.html'] };
-      }
-      const buf = await fs.readFile(target);
-      const ext = path.extname(target).toLowerCase();
-      return { buf, ctype: MIME[ext] || 'application/octet-stream' };
-    } catch {
-      if (spaFallback) {
-        try {
-          const fallback = path.join(rootDir, spaFallback);
-          const buf = await fs.readFile(fallback);
-          return { buf, ctype: MIME['.html'] };
-        } catch {
-          /* ignore */
-        }
-      }
-      return null;
-    }
-  }
-
-  const server = http.createServer(async (req, res) => {
-    const base = `http://${host}:${port}`;
-    let url;
-    try {
-      url = new URL(req.url || '/', base);
-    } catch {
-      return notFound(res, 'Invalid URL');
-    }
-    const pathname = url.pathname;
-
-    // --- SSE subscription ---
-    if (pathname === '/_ui/events') {
-      res.writeHead(200, {
-        'Content-Type': 'text/event-stream; charset=utf-8',
-        'Cache-Control': 'no-store',
-        Connection: 'keep-alive',
-      });
-      res.write(': connected\n\n'); // comment line
-      clients.add(res);
-
-      // keepalive pings
-      const ping = setInterval(() => {
-        try {
-          res.write(': ping\n\n');
-        } catch {
-          // ignore write errors
-        }
-      }, 30000);
-
-      req.on('close', () => {
-        clearInterval(ping);
-        clients.delete(res);
-      });
-      return;
-    }
-
-    // Internal notify hook (used by dev watcher)
-    if (pathname === '/_ui/changed') {
-      const route = url.searchParams.get('route') || '';
-      broadcast(`changed:${route}`);
-      return send(res, 204, '');
-    }
-
-    // UI root always React: serve built dist if present; otherwise proxy to Vite dev
-    if (pathname === '/_ui' || pathname === '/ui' || pathname === '/ui/') {
-      if (hasUi) {
-        const served = await tryServeFrom(uiDir, 'index.html', { spaFallback: null });
-        if (served) {
-          return send(res, 200, served.buf, {
-            'Content-Type': served.ctype,
-            'Cache-Control': 'no-store',
-          });
-        }
-      }
-      return proxyUi(req, res, '/_ui/');
-    }
-
-    // Helper: manifest passthrough
-    if (pathname === '/_ui/index' || pathname === '/ui/index') {
-      const raw = await readManifest();
-      const tag = etag(raw);
-      if (req.headers['if-none-match'] === tag) {
-        res.writeHead(304, { ETag: tag, 'Cache-Control': 'no-store' });
-        return res.end();
-      }
-      return send(res, 200, raw, {
-        'Content-Type': 'application/json; charset=utf-8',
-        ETag: tag,
-      });
-    }
-
-    // Helper: stream a built JSON by route
-    if (pathname === '/_ui/file' || pathname === '/ui/file') {
-      const route = url.searchParams.get('route');
-      if (!route || !route.startsWith('/')) {
-        return badReq(res, 'query parameter "route" is required and must start with "/"');
-      }
-      const fileAbs = routeToOutPath({ outAbs: outDir, route });
-      if (!fss.existsSync(fileAbs)) return notFound(res, `No file for route: ${route}`);
-      res.writeHead(200, {
-        'Content-Type': 'application/json; charset=utf-8',
-        'X-StatikAPI-Route': route,
-        'X-StatikAPI-File': path.relative(process.cwd(), fileAbs).replaceAll(path.sep, '/'),
-        'Cache-Control': 'no-store',
-      });
-      fss.createReadStream(fileAbs).pipe(res);
-      return;
-    }
-
-    // Serve UI assets: built if present, else proxy to Vite dev
-    if (pathname.startsWith('/_ui') || pathname.startsWith('/ui')) {
-      if (hasUi) {
-        const rel = pathname.replace(/^\/_?ui\/?/, '');
-        const reqPath = rel === '' ? 'index.html' : rel;
-        const served = await tryServeFrom(uiDir, reqPath, { spaFallback: 'index.html' });
-        if (served) {
-          return send(res, 200, served.buf, {
-            'Content-Type': served.ctype,
-            'Cache-Control': 'no-store',
-          });
-        }
-        return notFound(res);
-      }
-      return proxyUi(req, res, pathname);
-    }
-
-    // Static serve from api-out (best-effort)
-    const safe = path.normalize(path.join(outDir, pathname));
-    if (!safe.startsWith(outDir)) return notFound(res);
-    try {
-      const stat = await fs.stat(safe);
-      if (stat.isDirectory()) {
-        const idx = path.join(safe, 'index.json');
-        const s2 = await fs.readFile(idx);
-        return send(res, 200, s2, { 'Content-Type': 'application/json; charset=utf-8' });
-      } else {
-        const buf = await fs.readFile(safe);
-        const ctype = safe.endsWith('.json')
-          ? 'application/json; charset=utf-8'
-          : 'text/plain; charset=utf-8';
-        return send(res, 200, buf, { 'Content-Type': ctype });
-      }
-    } catch {
-      return notFound(res);
-    }
-  });
-
-  await new Promise((resolve, reject) => {
-    server.once('error', reject);
-    server.listen(port, host, resolve);
-  });
-
-  const url = `http://${host}:${port}/_ui`;
-  console.log(`statikapi preview → serving ${path.relative(process.cwd(), outDir) || outDir}`);
-  console.log(`open  ${url}`);
-
-  if (autoOpen) {
-    openBrowser(url).catch(() => {});
-  }
-
-  // Graceful shutdown
-  await new Promise((resolve) => {
-    const stop = () => server.close(() => resolve());
-    process.on('SIGINT', stop);
-    process.on('SIGTERM', stop);
-  });
-  return 0;
-}
-
-async function openBrowser(url) {
-  const { exec } = await import('node:child_process');
-  const plat = process.platform;
-  return new Promise((resolve) => {
-    const cmd =
-      plat === 'darwin'
-        ? `open "${url}"`
-        : plat === 'win32'
-          ? `start "" "${url}"`
-          : `xdg-open "${url}"`;
-    exec(cmd, () => resolve());
-  });
+  console.warn('`statikapi preview` is deprecated. Use `statikapi dev`.');
+  // forward to dev in UI mode
+  return devCmd(argv.filter((a) => a !== '--open')); // or just dev(argv)
 }