npm - @opentf/web-cli - Versions diffs - 1.0.0 - Mend

@opentf/web-cli 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/package.json ADDED Viewed

@@ -0,0 +1,47 @@
+{
+  "name": "@opentf/web-cli",
+  "version": "1.0.0",
+  "description": "OTF Web dev toolchain — the Rolldown-driven CSR dev server, production build, and SSG.",
+  "type": "module",
+  "bin": {
+    "otfw": "./src/cli.js"
+  },
+  "exports": {
+    ".": "./src/cli.js"
+  },
+  "files": [
+    "src"
+  ],
+  "engines": {
+    "bun": ">=1.0.0"
+  },
+  "dependencies": {
+    "@opentf/web-compiler": "0.1.0",
+    "@tailwindcss/node": "4.2.2",
+    "@tailwindcss/oxide": "4.2.2",
+    "rolldown": "1.0.0-rc.17",
+    "tailwindcss": "4.2.2"
+  },
+  "peerDependencies": {
+    "@opentf/web": "*"
+  },
+  "keywords": [
+    "opentf",
+    "web",
+    "dev-server",
+    "ssg",
+    "rolldown",
+    "toolchain"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Open-Tech-Foundation/Web-App-Framework.git",
+    "directory": "packages/web-cli"
+  },
+  "homepage": "https://github.com/Open-Tech-Foundation/Web-App-Framework#readme",
+  "bugs": "https://github.com/Open-Tech-Foundation/Web-App-Framework/issues",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/build.js ADDED Viewed

@@ -0,0 +1,126 @@
+// `otfw build` — the production build.
+//
+// One-shot Rolldown bundle (minified, content-hashed, code-split per route) with
+// the `otfwc` compiler as a transform plugin, Tailwind stylesheets compiled to
+// hashed CSS files, and a static `dist/` emitted from the project's index.html.
+import { build } from "rolldown";
+import {
+  cpSync,
+  existsSync,
+  mkdirSync,
+  readFileSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs";
+import { basename, join } from "node:path";
+import { compileCss, usesTailwind } from "./tailwind.js";
+import {
+  EXTENSIONS,
+  cssPlugin,
+  discoverPages,
+  entrySource,
+  loadProject,
+  otfwPlugin,
+} from "./shared.js";
+const hash = (s) => Bun.hash(s).toString(16).padStart(16, "0").slice(0, 8);
+export async function runBuild() {
+  const { root, appDir, webEntry, otfwc, exclude } = loadProject();
+  const t0 = performance.now();
+  const pages = discoverPages(appDir, exclude);
+  if (pages.length === 0) {
+    console.error(`✗ no page.jsx files found under ${appDir}`);
+    process.exit(1);
+  }
+  const outDir = join(root, "dist");
+  rmSync(outDir, { recursive: true, force: true });
+  mkdirSync(join(outDir, "assets"), { recursive: true });
+  // Write the app entry into a temp dir, then bundle it.
+  const tmp = join(root, ".otfw");
+  mkdirSync(tmp, { recursive: true });
+  const entry = join(tmp, "entry.js");
+  writeFileSync(entry, entrySource(pages, appDir));
+  const result = await build({
+    input: entry,
+    resolve: { alias: { "@opentf/web": webEntry }, extensions: EXTENSIONS },
+    plugins: [otfwPlugin(otfwc, { failOnError: true }), cssPlugin()],
+    output: {
+      dir: join(outDir, "assets"),
+      format: "esm",
+      entryFileNames: "bundle-[hash].js",
+      chunkFileNames: "[name]-[hash].js",
+      minify: true,
+    },
+  });
+  rmSync(tmp, { recursive: true, force: true });
+  const entryChunk = result.output.find((o) => o.type === "chunk" && o.isEntry);
+  const bundleHref = `/assets/${entryChunk.fileName}`;
+  // Compose dist/index.html from the project shell: strip module entry scripts,
+  // compile + hash any local stylesheet links, and inject the bundle.
+  const indexPath = join(root, "index.html");
+  let html = existsSync(indexPath)
+    ? readFileSync(indexPath, "utf8")
+    : `<!doctype html><html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>OTF Web</title></head><body><div id="app"></div></body></html>`;
+  html = html.replace(
+    /<script\s+type=["']module["'][^>]*src=[^>]*>\s*<\/script>\s*/gi,
+    "",
+  );
+  // Compile each local <link rel="stylesheet" href="/..."> and rewrite the href.
+  const links = [...html.matchAll(/<link\b[^>]*\bhref=["']([^"']+)["'][^>]*>/gi)];
+  for (const [, href] of links) {
+    if (!href.startsWith("/")) continue; // leave external/CDN links alone
+    const src = join(root, href);
+    if (!existsSync(src)) continue;
+    const raw = readFileSync(src, "utf8");
+    const css = usesTailwind(raw) ? await compileCss(src, raw, root) : raw;
+    const name = basename(href).replace(/\.css$/, "");
+    const out = `${name}-${hash(css)}.css`;
+    writeFileSync(join(outDir, "assets", out), css);
+    html = html.replaceAll(href, `/assets/${out}`);
+  }
+  const script = `<script type="module" src="${bundleHref}"></script>\n`;
+  html = html.includes("</body>")
+    ? html.replace("</body>", `${script}</body>`)
+    : html + script;
+  writeFileSync(join(outDir, "index.html"), html);
+  // SSG: pre-render each route into static HTML using the shell we just composed
+  // (so per-route files carry the same bundle + stylesheet links).
+  let ssg = null;
+  if (process.argv.includes("--ssg")) {
+    const { runPrerender } = await import("./prerender.js");
+    ssg = await runPrerender({ root, pages, webEntry, otfwc, shellHtml: html, outDir });
+  }
+  // Copy the public/ directory (static assets served at the root), if present.
+  const publicDir = join(root, "public");
+  if (existsSync(publicDir)) cpSync(publicDir, outDir, { recursive: true });
+  const chunks = result.output.filter((o) => o.type === "chunk").length;
+  const ms = Math.round(performance.now() - t0);
+  console.log(`\n  OTF Web build`);
+  console.log(`  → dist/  (${pages.length} routes, ${chunks} chunks) in ${ms}ms`);
+  if (ssg) {
+    console.log(
+      `  → pre-rendered ${ssg.count} HTML file(s)` +
+        (ssg.skipped.length
+          ? `; skipped ${ssg.skipped.length} dynamic route(s) without getStaticPaths`
+          : ""),
+    );
+  }
+  console.log("");
+}

package/src/cli.js ADDED Viewed

@@ -0,0 +1,33 @@
+#!/usr/bin/env bun
+// `otfw` — the OTF Web toolchain CLI.
+//
+//   otfw dev     start the CSR dev server (watch + live-reload)
+//   otfw build   produce a static production bundle in dist/
+//
+// The project root is the current working directory (its index.html + app/),
+// like `vite` / `next`.
+const cmd = process.argv[2];
+switch (cmd) {
+  case "dev": {
+    const { runDev } = await import("./dev.js");
+    await runDev();
+    break;
+  }
+  case "build": {
+    const { runBuild } = await import("./build.js");
+    await runBuild();
+    break;
+  }
+  default: {
+    if (cmd && cmd !== "help" && cmd !== "--help" && cmd !== "-h") {
+      console.error(`unknown command: ${cmd}\n`);
+    }
+    console.log("otfw — OTF Web toolchain");
+    console.log("usage:");
+    console.log("  otfw dev     start the dev server");
+    console.log("  otfw build   build for production (dist/); --ssg to pre-render routes");
+    process.exit(cmd && cmd !== "help" && cmd !== "--help" && cmd !== "-h" ? 1 : 0);
+  }
+}

package/src/dev.js ADDED Viewed

@@ -0,0 +1,220 @@
+// `otfw dev` — the CSR dev server.
+//
+// Drives Rolldown in watch mode (the `otfwc` compiler as a transform plugin) and
+// serves the project's index.html with WebSocket live-reload on rebuild. Tailwind
+// stylesheets are compiled on the fly (see ./tailwind.js). The project root is the
+// current working directory, like `vite` / `next dev`.
+import { watch } from "rolldown";
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import { compileCss, usesTailwind } from "./tailwind.js";
+import { overlayClient } from "./overlay.js";
+import {
+  EXTENSIONS,
+  MIME,
+  cssPlugin,
+  discoverPages,
+  entrySource,
+  loadProject,
+  otfwPlugin,
+} from "./shared.js";
+// Resolve the start port. An explicit `--port <n>` / `-p <n>` / `--port=<n>` is
+// honored exactly (fail fast if it's busy); with no flag we default to 3000 and
+// scan upward for a free port. (No PORT env: this is a dev tool, and OpenTF's
+// production output is static — there's no long-running server to take PORT.)
+function resolvePort() {
+  const argv = process.argv.slice(3); // args after `dev`
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i];
+    if ((a === "--port" || a === "-p") && argv[i + 1]) {
+      return { port: Number(argv[i + 1]), explicit: true };
+    }
+    if (a.startsWith("--port=")) {
+      return { port: Number(a.slice("--port=".length)), explicit: true };
+    }
+  }
+  return { port: 3000, explicit: false };
+}
+// Start `Bun.serve`. An explicit port is tried once (busy → fail fast); otherwise
+// scan upward from `start` for the first free port (EADDRINUSE → next).
+function serve(start, explicit, options) {
+  const end = explicit ? start : start + 99;
+  for (let port = start; port <= end; port++) {
+    try {
+      return Bun.serve({ ...options, port });
+    } catch (e) {
+      if (e?.code === "EADDRINUSE") {
+        if (explicit) {
+          console.error(`✗ port ${port} is already in use (pass a different --port)`);
+          process.exit(1);
+        }
+        continue;
+      }
+      throw e;
+    }
+  }
+  console.error(`✗ no free port found in ${start}–${end}`);
+  process.exit(1);
+}
+export async function runDev() {
+  const { root, appDir, webEntry, otfwc, exclude } = loadProject();
+  const { port: startPort, explicit: explicitPort } = resolvePort();
+  if (!Number.isInteger(startPort) || startPort < 1 || startPort > 65535) {
+    console.error(`✗ invalid --port value: ${startPort}`);
+    process.exit(1);
+  }
+  const pages = discoverPages(appDir, exclude);
+  if (pages.length === 0) {
+    console.error(`✗ no page.jsx files found under ${appDir}`);
+    process.exit(1);
+  }
+  const devDir = join(root, ".dev");
+  mkdirSync(join(devDir, "csr"), { recursive: true });
+  const entry = join(devDir, "entry.js");
+  writeFileSync(entry, entrySource(pages, appDir));
+  // WebSocket HMR: clients on the "hmr" topic get JSON messages — a successful
+  // rebuild sends { type: "reload" }; a compile/build failure sends
+  // { type: "error" } so the injected overlay shows it over the last good page.
+  let server;
+  const publish = (msg) => server?.publish("hmr", JSON.stringify(msg));
+  // Per-module compile diagnostics (keyed by id); a clean build clears them.
+  const compileErrors = new Map();
+  const watcher = watch({
+    input: entry,
+    resolve: { alias: { "@opentf/web": webEntry }, extensions: EXTENSIONS },
+    plugins: [
+      otfwPlugin(otfwc, {
+        onResult: (id, err) => (err ? compileErrors.set(id, err) : compileErrors.delete(id)),
+      }),
+      cssPlugin(),
+    ],
+    output: {
+      dir: join(devDir, "csr"),
+      format: "esm",
+      entryFileNames: "bundle.js",
+    },
+  });
+  watcher.on("event", (e) => {
+    if (e.code === "BUNDLE_END") {
+      e.result?.close?.();
+      if (compileErrors.size > 0) {
+        const [id, message] = [...compileErrors][0];
+        console.error(`✗ ${compileErrors.size} compile error(s)`);
+        publish({ type: "error", kind: "compile", id, message });
+      } else {
+        console.log(`✓ bundled in ${e.duration}ms`);
+        publish({ type: "reload" });
+      }
+    } else if (e.code === "ERROR") {
+      const message = e.error?.message ?? String(e.error);
+      console.error("✗ build error:\n", message);
+      publish({ type: "error", kind: "build", message, stack: e.error?.stack });
+    }
+  });
+  const indexPath = join(root, "index.html");
+  // Injected into the served HTML: our bundle + the dev error overlay / reload
+  // client (reconnects and reloads once the server is back after a restart).
+  const injected =
+    `<script type="module" src="/bundle.js"></script>\n` +
+    `<script>${overlayClient}</script>\n`;
+  // Use the project's index.html as the shell, stripping any module entry script
+  // (the app would be double-loaded) and injecting our bundle + reload client.
+  function buildHtml() {
+    let html;
+    if (existsSync(indexPath)) {
+      html = readFileSync(indexPath, "utf8").replace(
+        /<script\s+type=["']module["'][^>]*src=[^>]*>\s*<\/script>\s*/gi,
+        "",
+      );
+    } else {
+      html = `<!doctype html><html lang="en"><head>
+<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+<title>OTF Web</title></head><body><div id="app"></div></body></html>`;
+    }
+    return html.includes("</body>")
+      ? html.replace("</body>", `${injected}</body>`)
+      : html + injected;
+  }
+  // Serve a static file from the project root (no traversal outside it). Tailwind
+  // entry stylesheets are compiled on request.
+  async function serveStatic(pathname) {
+    const file = join(root, pathname);
+    if (!file.startsWith(root) || !existsSync(file)) return null;
+    const ext = pathname.split(".").pop();
+    if (ext === "css") {
+      const source = readFileSync(file, "utf8");
+      const css = usesTailwind(source)
+        ? await compileCss(file, source, root).catch((err) => {
+            console.error(`✗ tailwind failed for ${pathname}:\n${err?.message ?? err}`);
+            return source;
+          })
+        : source;
+      return new Response(css, { headers: { "content-type": "text/css" } });
+    }
+    return new Response(readFileSync(file), {
+      headers: { "content-type": MIME[ext] ?? "application/octet-stream" },
+    });
+  }
+  server = serve(startPort, explicitPort, {
+    websocket: {
+      open: (ws) => {
+        ws.subscribe("hmr");
+        // A client connecting while a compile error is outstanding sees it now.
+        if (compileErrors.size > 0) {
+          const [id, message] = [...compileErrors][0];
+          ws.send(JSON.stringify({ type: "error", kind: "compile", id, message }));
+        }
+      },
+    },
+    async fetch(req, srv) {
+      const { pathname } = new URL(req.url);
+      if (pathname === "/__hmr") {
+        return srv.upgrade(req)
+          ? undefined
+          : new Response("upgrade failed", { status: 400 });
+      }
+      // Built output: the entry bundle and code-split chunks live in .dev/csr.
+      if (pathname.endsWith(".js")) {
+        const built = join(devDir, "csr", pathname);
+        if (built.startsWith(join(devDir, "csr") + "/") && existsSync(built)) {
+          return new Response(readFileSync(built), {
+            headers: { "content-type": "text/javascript" },
+          });
+        }
+        if (pathname === "/bundle.js") {
+          return new Response("// building…", {
+            headers: { "content-type": "text/javascript" },
+          });
+        }
+      }
+      // Static assets referenced by index.html (css, public/, etc).
+      if (pathname !== "/") {
+        const asset = await serveStatic(pathname);
+        if (asset) return asset;
+        if (/\.[a-z0-9]+$/i.test(pathname)) {
+          return new Response("not found", { status: 404 });
+        }
+      }
+      return new Response(buildHtml(), {
+        headers: { "content-type": "text/html" },
+      });
+    },
+  });
+  console.log(`\n  OTF Web dev server`);
+  console.log(`  → http://localhost:${server.port}  (${pages.length} routes)\n`);
+}

package/src/overlay.js ADDED Viewed

@@ -0,0 +1,66 @@
+// The dev-mode error overlay client. Injected as an inline <script> into the
+// served HTML, so it is intentionally a self-contained IIFE with no imports.
+//
+// It surfaces two error sources, Next.js-style:
+//   • compile errors — pushed from the dev server over the HMR WebSocket
+//     ({ type: "error" }); a successful rebuild sends { type: "reload" }.
+//   • runtime errors — the runtime's `otfw:error` window event (render/effect/
+//     mount/route), plus uncaught `error` / `unhandledrejection`.
+// `otfw:error-clear` (a good navigation) and a successful reload dismiss it.
+export const overlayClient = `(() => {
+  const C = { bg:"rgba(8,8,12,.86)", panel:"#161618", line:"#2c2c30", red:"#ff5c5c", head:"#2a1416", text:"#ececf0", dim:"#9aa0a6" };
+  let root, titleEl, msgEl, stackEl, fileEl;
+  const css = (el, s) => { el.style.cssText = s; return el; };
+  function ensure() {
+    if (root) return;
+    root = css(document.createElement("div"), "position:fixed;inset:0;z-index:2147483647;background:"+C.bg+";display:none;align-items:center;justify-content:center;padding:6vh 4vw;font-family:ui-monospace,SFMono-Regular,Menlo,monospace");
+    const panel = css(document.createElement("div"), "max-width:980px;width:100%;max-height:88vh;display:flex;flex-direction:column;background:"+C.panel+";border:1px solid "+C.line+";border-radius:12px;box-shadow:0 24px 70px rgba(0,0,0,.55);overflow:hidden");
+    const bar = css(document.createElement("div"), "display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid "+C.line+";background:"+C.head);
+    const badge = css(document.createElement("span"), "font-weight:700;font-size:11px;letter-spacing:.6px;color:#fff;background:"+C.red+";padding:3px 8px;border-radius:6px");
+    badge.textContent = "ERROR";
+    titleEl = css(document.createElement("span"), "color:"+C.red+";font-weight:600;font-size:14px");
+    const spacer = css(document.createElement("span"), "flex:1");
+    fileEl = css(document.createElement("span"), "color:"+C.dim+";font-size:12px;max-width:42%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap");
+    const close = css(document.createElement("button"), "border:0;background:transparent;color:"+C.dim+";cursor:pointer;font-size:18px;line-height:1;padding:0 2px");
+    close.textContent = "\\u2715"; close.title = "Dismiss (Esc)"; close.onclick = hide;
+    bar.append(badge, titleEl, spacer, fileEl, close);
+    msgEl = css(document.createElement("div"), "padding:16px 18px;color:"+C.text+";font-size:14px;white-space:pre-wrap;line-height:1.55");
+    stackEl = css(document.createElement("pre"), "margin:0;padding:0 18px 18px;color:"+C.dim+";font-size:12.5px;white-space:pre-wrap;overflow:auto;flex:1");
+    panel.append(bar, msgEl, stackEl);
+    root.appendChild(panel);
+    root.addEventListener("click", (e) => { if (e.target === root) hide(); });
+    document.body.appendChild(root);
+  }
+  function show(o) {
+    ensure();
+    titleEl.textContent = o.title || "Error";
+    fileEl.textContent = o.file || "";
+    msgEl.textContent = o.message != null ? String(o.message) : "";
+    stackEl.textContent = o.stack || "";
+    root.style.display = "flex";
+  }
+  function hide() { if (root) root.style.display = "none"; }
+  window.addEventListener("keydown", (e) => { if (e.key === "Escape") hide(); });
+  window.addEventListener("error", (e) => show({ title:"Runtime error", message:e.message, stack:e.error && e.error.stack, file:e.filename }));
+  window.addEventListener("unhandledrejection", (e) => { const r = e.reason || {}; show({ title:"Unhandled promise rejection", message:r.message || String(r), stack:r.stack }); });
+  window.addEventListener("otfw:error", (e) => {
+    const d = e.detail || {}, ctx = d.context || {}, err = d.error || {};
+    const title = (ctx.phase ? "Error during " + ctx.phase : "Runtime error") + (ctx.component ? " \\u2014 <" + ctx.component + ">" : "");
+    show({ title, message: err.message || String(err), stack: err.stack, file: ctx.path });
+  });
+  window.addEventListener("otfw:error-clear", hide);
+  const url = (location.protocol === "https:" ? "wss" : "ws") + "://" + location.host + "/__hmr";
+  const connect = () => {
+    const ws = new WebSocket(url);
+    ws.onmessage = (ev) => {
+      let m; try { m = JSON.parse(ev.data); } catch { m = { type: "reload" }; }
+      if (m.type === "reload") location.reload();
+      else if (m.type === "error") show({ title:"Compile error", message:m.message, file:m.id, stack:m.stack });
+    };
+    ws.onclose = () => setTimeout(connect, 1000);
+  };
+  connect();
+})();`;

package/src/prerender.js ADDED Viewed

@@ -0,0 +1,88 @@
+// SSG pre-render (ARCHITECTURE.md §6): build a *server* bundle of the app with the
+// compiler's SSG backend (HTML-string renderers), then run it in plain Bun to
+// render each route to a static HTML file. No DOM — the SSG output is pure string
+// concatenation, so no effects/lifecycle run.
+import { build } from "rolldown";
+import { mkdirSync, rmSync, writeFileSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { pathToFileURL } from "node:url";
+import { EXTENSIONS, cssPlugin, otfwPlugin } from "./shared.js";
+// Generated server entry: eager-import every page module (so registerRoutes sees
+// real namespaces, enabling getStaticPaths) and re-export the render API.
+function serverEntrySource(pages) {
+  const imports = pages.map((p, i) => `import * as p${i} from ${JSON.stringify(p)};`).join("\n");
+  const map = pages.map((p, i) => `  [${JSON.stringify(p)}]: p${i},`).join("\n");
+  return (
+    `${imports}\n` +
+    `import { registerRoutes } from "@opentf/web";\n` +
+    `export { renderToString, collectRoutePaths } from "@opentf/web/server";\n` +
+    `registerRoutes({\n${map}\n});\n`
+  );
+}
+// Inject pre-rendered markup into the shell's #app container.
+function injectMarkup(shellHtml, markup) {
+  return shellHtml.replace(/(<div id="app"[^>]*>)\s*(<\/div>)/, `$1${markup}$2`);
+}
+// "/" → dist/index.html, "/post/1" → dist/post/1/index.html.
+function htmlPathFor(outDir, route) {
+  return route === "/" ? join(outDir, "index.html") : join(outDir, route, "index.html");
+}
+/**
+ * Pre-render the app to static HTML files under `outDir`. Returns
+ * `{ count, skipped, failed }`.
+ */
+export async function runPrerender({ root, pages, webEntry, otfwc, shellHtml, outDir }) {
+  const tmp = join(root, ".otfw-ssg");
+  mkdirSync(tmp, { recursive: true });
+  const entry = join(tmp, "ssg-entry.js");
+  writeFileSync(entry, serverEntrySource(pages));
+  const serverApi = join(dirname(webEntry), "server", "index.js");
+  await build({
+    input: entry,
+    resolve: {
+      alias: { "@opentf/web/server": serverApi, "@opentf/web": webEntry },
+      extensions: EXTENSIONS,
+    },
+    plugins: [otfwPlugin(otfwc, { failOnError: true, target: "ssg" }), cssPlugin()],
+    output: { dir: join(tmp, "out"), format: "esm", entryFileNames: "server.js" },
+  });
+  // The runtime defines `class … extends HTMLElement` at load (for CSR custom
+  // elements). SSG never instantiates them, but the base class must exist so the
+  // class definitions evaluate. A bare stub suffices — no DOM (customElements
+  // stays undefined, so the elements self-register only in the browser).
+  globalThis.HTMLElement ??= class {};
+  const mod = await import(pathToFileURL(join(tmp, "out", "server.js")).href);
+  const { paths, skipped } = await mod.collectRoutePaths();
+  const failed = [];
+  for (const route of paths) {
+    try {
+      const markup = (await mod.renderToString(route)) ?? "";
+      const file = htmlPathFor(outDir, route);
+      mkdirSync(dirname(file), { recursive: true });
+      writeFileSync(file, injectMarkup(shellHtml, markup));
+    } catch (e) {
+      failed.push(route);
+      console.error(`✗ pre-render failed for ${route}: ${e?.message ?? e}`);
+    }
+  }
+  // 404: any unmatched path resolves to the registered 404 page.
+  try {
+    const notFound = await mod.renderToString("/__otfw_404__");
+    if (notFound != null) writeFileSync(join(outDir, "404.html"), injectMarkup(shellHtml, notFound));
+  } catch {
+    /* no 404 page */
+  }
+  rmSync(tmp, { recursive: true, force: true });
+  return { count: paths.length - failed.length, skipped, failed };
+}

package/src/shared.js ADDED Viewed

@@ -0,0 +1,206 @@
+// Shared plumbing for the OTF Web toolchain (`otfw dev` / `otfw build`).
+//
+// Both commands treat the current working directory as the project root (its
+// `index.html` + `app/`), resolve `@opentf/web` via node resolution, run the
+// `otfwc` IR compiler as a Rolldown `transform` plugin, and let Rolldown link the
+// module graph. This module holds everything they have in common.
+import { existsSync, readdirSync } from "node:fs";
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { otfwcPath } from "@opentf/web-compiler";
+export const EXTENSIONS = [".jsx", ".tsx", ".js", ".ts"];
+export const MIME = {
+  css: "text/css",
+  js: "text/javascript",
+  json: "application/json",
+  svg: "image/svg+xml",
+  png: "image/png",
+  jpg: "image/jpeg",
+  ico: "image/x-icon",
+  woff2: "font/woff2",
+};
+/** Nearest ancestor directory of `from` (inclusive) that contains `name`. */
+export function findUp(name, from) {
+  let dir = from;
+  while (true) {
+    if (existsSync(join(dir, name))) return dir;
+    const parent = dirname(dir);
+    if (parent === dir) return null;
+    dir = parent;
+  }
+}
+/**
+ * Resolve the project and toolchain: the app being built (cwd), the runtime
+ * package, the `otfwc` compiler, and the excluded routes. Exits with a clear
+ * message on any hard failure. Builds the compiler on demand from the workspace.
+ */
+export function loadProject() {
+  const root = process.cwd();
+  const appDir = join(root, "app");
+  if (!existsSync(appDir)) {
+    fail(
+      `no app/ directory in ${root}\n  run otfw from your project root (the folder with index.html and app/).`,
+    );
+  }
+  // Resolve the runtime the way the bundler will, so it works as an installed
+  // dependency or a workspace package — no hardcoded path.
+  let webEntry;
+  try {
+    webEntry = Bun.resolveSync("@opentf/web", root);
+  } catch {
+    fail(`cannot resolve "@opentf/web" from ${root}\n  add it to your dependencies.`);
+  }
+  // Locate the `otfwc` compiler. Published: the prebuilt binary from `@opentf/web-compiler`
+  // (a dependency of this CLI). In this repo's own dev (a Cargo workspace is found
+  // above the CLI): the cargo `target/debug` build, rebuilt on demand. `OTFWC_BIN`
+  // overrides both.
+  const cliDir = dirname(fileURLToPath(import.meta.url));
+  const workspace = findUp("Cargo.toml", cliDir);
+  let otfwc;
+  if (process.env.OTFWC_BIN) {
+    otfwc = process.env.OTFWC_BIN;
+  } else if (workspace) {
+    otfwc = join(workspace, "target", "debug", "otfwc");
+    ensureCompiler(otfwc, workspace);
+  } else {
+    try {
+      otfwc = otfwcPath();
+    } catch (e) {
+      fail(e.message);
+    }
+  }
+  // forms-demo depends on @opentf/web-form, which is not yet ported to the new
+  // runtime (it lands with the Project Graph). Override with EXCLUDE_ROUTES.
+  const exclude = new Set(
+    (process.env.EXCLUDE_ROUTES ?? "forms-demo").split(",").filter(Boolean),
+  );
+  return { root, appDir, webEntry, otfwc, workspace, exclude };
+}
+function ensureCompiler(otfwc, workspace) {
+  if (existsSync(otfwc)) return;
+  if (!workspace) fail(`otfwc compiler not found at ${otfwc}`);
+  console.log("building compiler (cargo build -p otfw_cli)…");
+  const b = Bun.spawnSync(["cargo", "build", "-p", "otfw_cli"], {
+    cwd: workspace,
+    stdout: "inherit",
+    stderr: "inherit",
+  });
+  if (b.exitCode !== 0) process.exit(b.exitCode);
+}
+/** Discover file-based routes under `app/`: every page/layout and the 404. */
+export function discoverPages(dir, exclude) {
+  const out = [];
+  for (const entry of readdirSync(dir, { withFileTypes: true })) {
+    if (entry.isDirectory() && exclude.has(entry.name)) continue;
+    const full = `${dir}/${entry.name}`;
+    if (entry.isDirectory()) out.push(...discoverPages(full, exclude));
+    else if (/^(page|layout|404)\.[jt]sx$/.test(entry.name)) out.push(full);
+  }
+  return out;
+}
+/** The optional `app/routeGuard.{js,ts}` path, or null. */
+export function findGuard(appDir) {
+  return [join(appDir, "routeGuard.js"), join(appDir, "routeGuard.ts")].find(
+    existsSync,
+  );
+}
+/**
+ * The app entry source: hand `mountApp` a route map of lazy `() => import()`
+ * loaders (so each route code-splits into its own chunk) plus the optional guard.
+ */
+export function entrySource(pages, appDir) {
+  const map = pages
+    .map((p) => `    [${JSON.stringify(p)}]: () => import(${JSON.stringify(p)}),`)
+    .join("\n");
+  const guard = findGuard(appDir);
+  return (
+    `import { mountApp } from "@opentf/web";\n` +
+    (guard ? `import guard from ${JSON.stringify(guard)};\n` : "") +
+    `mountApp({\n  pages: {\n${map}\n  },\n` +
+    `  target: document.getElementById("app"),${guard ? "\n  guard," : ""}\n});\n`
+  );
+}
+/**
+ * Rolldown plugin: compile `.jsx`/`.tsx` through the `otfwc` IR compiler. Page /
+ * layout / 404 modules become factories; everything else a Custom Element. On a
+ * compile error it emits a diagnostic stub (so one bad route doesn't sink the
+ * build) unless `failOnError` is set (production builds should fail loudly).
+ * `onResult(id, errorMessageOrNull)` is called per module so the dev server can
+ * push compile diagnostics to the error overlay and clear them once fixed.
+ */
+export function otfwPlugin(otfwc, { failOnError = false, onResult, target = "csr" } = {}) {
+  return {
+    name: "otfw",
+    transform(code, id) {
+      if (!/\.[jt]sx$/.test(id)) return null;
+      const base = id.split("/").pop().replace(/\.[jt]sx$/, "");
+      const isPage = base === "page" || base === "layout" || base === "404";
+      const args = ["build"];
+      if (!isPage) args.push("--component");
+      if (target === "ssg") args.push("--target=ssg");
+      args.push("--stdin", id);
+      const proc = Bun.spawnSync([otfwc, ...args], {
+        stdin: new TextEncoder().encode(code),
+      });
+      if (proc.exitCode !== 0) {
+        const msg = proc.stderr.toString();
+        onResult?.(id, msg);
+        if (failOnError) {
+          this.error(`otfwc failed for ${id}:\n${msg}`);
+        }
+        console.error(`✗ otfwc failed for ${id}:\n${msg}`);
+        const stub =
+          `export default function () { const pre = document.createElement("pre");` +
+          ` pre.style.cssText = "color:#f87171;padding:1rem;white-space:pre-wrap";` +
+          ` pre.textContent = ${JSON.stringify(`Compile error in ${id}\n\n${msg}`)};` +
+          ` return pre; }`;
+        return { code: stub, moduleSideEffects: true };
+      }
+      onResult?.(id, null);
+      // Side effects (e.g. customElements.define) must survive bundling.
+      return { code: proc.stdout.toString(), moduleSideEffects: true };
+    },
+  };
+}
+/**
+ * CSS plugin: `import "./x.css"` injects a <style>; `*.module.css` resolves to an
+ * identity class-name map (`styles.foo` → "foo"). Dev-grade CSS Modules.
+ */
+export function cssPlugin() {
+  return {
+    name: "css",
+    transform(code, id) {
+      if (!id.endsWith(".css")) return null;
+      const inject =
+        `const __s = document.createElement("style");` +
+        ` __s.textContent = ${JSON.stringify(code)};` +
+        ` document.head.appendChild(__s);`;
+      const out = id.endsWith(".module.css")
+        ? `${inject}\nexport default new Proxy({}, { get: (_, k) => k });`
+        : `${inject}\nexport default ${JSON.stringify(code)};`;
+      return { code: out, moduleSideEffects: true };
+    },
+  };
+}
+function fail(msg) {
+  console.error(`✗ ${msg}`);
+  process.exit(1);
+}

package/src/tailwind.js ADDED Viewed

@@ -0,0 +1,43 @@
+// Tailwind CSS v4 compilation for the dev server.
+//
+// We drive Tailwind's engine directly: `@tailwindcss/node` resolves `@import
+// "tailwindcss"` and the theme/utility layers, and `@tailwindcss/oxide` scans the
+// project for class-name candidates. This is the same engine the editor tooling
+// uses, invoked as a library — no separate Tailwind config or build step.
+import { compile } from "@tailwindcss/node";
+import { Scanner } from "@tailwindcss/oxide";
+import { dirname } from "node:path";
+// A stylesheet uses Tailwind if it pulls in the framework (v4 `@import
+// "tailwindcss"`) or any legacy `@tailwind` directive. Plain CSS is served as-is.
+export function usesTailwind(source) {
+  return /@import\s+["']tailwindcss["']|@tailwind\b/.test(source);
+}
+/**
+ * Compile a Tailwind entry stylesheet to plain CSS, scanning `base` (the project
+ * root) for the utility classes actually used.
+ *
+ * @param {string} cssPath  absolute path to the entry `.css`
+ * @param {string} source   its contents
+ * @param {string} base     project root to scan for class-name candidates
+ * @returns {Promise<string>} the generated CSS
+ */
+export async function compileCss(cssPath, source, base) {
+  const compiler = await compile(source, {
+    base: dirname(cssPath),
+    onDependency: () => {},
+  });
+  // Decide what to scan: `source(none)` disables scanning, `source(dir)` narrows
+  // it, otherwise scan the whole project root. Always include the compiler's own
+  // declared sources.
+  const roots =
+    compiler.root === "none"
+      ? []
+      : compiler.root === null
+        ? [{ base, pattern: "**/*", negated: false }]
+        : [{ ...compiler.root, negated: false }];
+  const scanner = new Scanner({ sources: roots.concat(compiler.sources) });
+  return compiler.build(scanner.scan());
+}