reroute-js 1.0.0-alpha.0 → 1.0.0-alpha.2

package/README.md

@@ -179,7 +179,7 @@ Reroute is a feature-rich file-based routing framework for building fullstack Re
 - ⚡ **React 19 Streaming** - Native `renderToReadableStream` for optimal performance
 
 ### 🎨 Styling & Theming
-- 🎨 **Native CSS** - Author styles in `src/client/theme.css` with no CSS framework required
+- 🎨 **Native CSS** - Author styles in `src/client/index.css` with no CSS framework required
 - ⚡ **Live CSS Reload** - Instant style updates in development mode
 - 🔧 **Zero Config** - Theme CSS is synced automatically during `reroute gen`
 

package/cli/bin.d.ts

@@ -1,5 +1,5 @@
 /**
- * reroute-js v1.0.0-alpha.0
+ * reroute-js v1.0.0-alpha.2
  *
  * @license MIT
  * @copyright 2026 stewones <hi@stewan.io>

package/cli/bin.js

@@ -1,7 +1,7 @@
 #!/usr/bin/env bun
 // @bun
 /**
- * reroute-js v1.0.0-alpha.0
+ * reroute-js v1.0.0-alpha.2
  *
  * @license MIT
  * @copyright 2026 stewones <hi@stewan.io>
@@ -66,7 +66,7 @@ async function getVersionString() {
 }
 async function getVersion() {
   if (true) {
-    return "1.0.0-alpha.0";
+    return "1.0.0-alpha.2";
   }
   const possiblePaths = [
     path.join(import.meta.dir, "../../../../package.json"),
@@ -84,7 +84,7 @@ async function getVersion() {
 }
 async function getCommit() {
   if (true) {
-    return "9abafce";
+    return "3e34125";
   }
   return "dev";
 }
@@ -325,7 +325,7 @@ function printSuccess(projectName, template) {
     console.log("      |   |-- products/");
     console.log("      |   |-- categories/");
     console.log("      |-- lib/                      # API client & utilities");
-    console.log("      +-- theme.css                 # Theme CSS");
+    console.log("      +-- index.css                 # Client CSS");
   }
   console.log("      |   |-- index.tsx");
   console.log("      |   +-- about.tsx");
@@ -3733,13 +3733,13 @@ async function inlineThemeCSS(clientDir, minify = false, isWatchMode = false) {
     }
     if (isWatchMode) {
       const timestamp = Date.now();
-      return `<link rel="stylesheet" href="/.reroute/theme.css?t=${timestamp}" data-reroute="theme">`;
+      return `<link rel="stylesheet" href="/.reroute/index.css?t=${timestamp}" data-reroute="theme">`;
     }
     const candidates = [
-      join2(clientDir, "..", ".reroute", "theme.css"),
-      join2(clientDir, "..", "..", ".reroute", "theme.css"),
-      join2(clientDir, "..", "..", "..", ".reroute", "theme.css"),
-      join2(clientDir, "..", "..", "..", "..", ".reroute", "theme.css")
+      join2(clientDir, "..", ".reroute", "index.css"),
+      join2(clientDir, "..", "..", ".reroute", "index.css"),
+      join2(clientDir, "..", "..", "..", ".reroute", "index.css"),
+      join2(clientDir, "..", "..", "..", "..", ".reroute", "index.css")
     ];
     let cssPath = "";
     for (const p of candidates) {
@@ -7376,25 +7376,79 @@ var AUTO_HEADER = `// \uD83D\uDEA8 Auto-generated streaming wrapper by Reroute -
 var init_suspense = () => {};
 
 // packages/cli/src/commands/lib/theme.ts
-import { existsSync as existsSync5 } from "node:fs";
-import { mkdir as mkdir2 } from "node:fs/promises";
-import { dirname as dirname5, join as join9 } from "node:path";
-function getThemePaths(cwd) {
-  const input = join9(cwd, "src/client/theme.css");
-  const output = join9(cwd, ".reroute/theme.css");
+import { existsSync as existsSync5, readFileSync as readFileSync4 } from "node:fs";
+import { mkdir as mkdir2, writeFile } from "node:fs/promises";
+import { dirname as dirname5, isAbsolute, join as join9, resolve as resolve2 } from "node:path";
+function getCssPaths(cwd) {
+  const input = join9(cwd, "src/client/index.css");
+  const output = join9(cwd, ".reroute/index.css");
   return { input, output };
 }
+function isFileImport(specifier) {
+  if (specifier.startsWith("http://") || specifier.startsWith("https://") || specifier.startsWith("data:") || specifier.startsWith("/")) {
+    return false;
+  }
+  return true;
+}
+function bundleCssEntrypoint(entryPath) {
+  const absEntry = resolve2(entryPath);
+  const stack = new Set;
+  const completed = new Set;
+  function bundleFile(filePath) {
+    const absPath = resolve2(filePath);
+    if (completed.has(absPath)) {
+      return "";
+    }
+    if (stack.has(absPath)) {
+      throw new Error(`[reroute/theme] Circular @import detected: ${absPath}`);
+    }
+    if (!existsSync5(absPath)) {
+      throw new Error(`[reroute/theme] Missing CSS import: ${absPath}`);
+    }
+    stack.add(absPath);
+    const source = readFileSync4(absPath, "utf-8");
+    const baseDir = dirname5(absPath);
+    const bundled = source.replace(IMPORT_RE, (full, single, double, bare, rest) => {
+      const specifier = single || double || bare;
+      const condition = (rest ?? "").trim();
+      if (condition || !isFileImport(specifier)) {
+        return full;
+      }
+      const importedPath = isAbsolute(specifier) ? specifier : resolve2(baseDir, specifier);
+      return `/* ${specifier} */
+${bundleFile(importedPath)}
+`;
+    });
+    stack.delete(absPath);
+    completed.add(absPath);
+    return bundled;
+  }
+  return bundleFile(absEntry);
+}
 async function syncThemeCss(cwd) {
-  const { input, output } = getThemePaths(cwd);
+  const { input, output } = getCssPaths(cwd);
   if (!existsSync5(input)) {
     return false;
   }
   await mkdir2(dirname5(output), { recursive: true });
-  await Bun.write(output, Bun.file(input));
-  console.log("[reroute/theme] synced theme.css");
+  try {
+    const css = bundleCssEntrypoint(input);
+    await writeFile(output, css, "utf-8");
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    if (message.startsWith("[reroute/theme]")) {
+      throw err;
+    }
+    throw new Error(`[reroute/theme] Failed to bundle index.css:
+${message}`);
+  }
+  console.log("[reroute/theme] synced index.css");
   return true;
 }
-var init_theme = () => {};
+var IMPORT_RE;
+var init_theme = __esm(() => {
+  IMPORT_RE = /@import\s+(?:url\(\s*)?(?:'([^']+)'|"([^"]+)"|([^'")\s]+))\s*\)?\s*([^;]*);/g;
+});
 
 // packages/cli/src/commands/gen.ts
 var exports_gen = {};
@@ -7406,10 +7460,10 @@ import { mkdir as mkdir3, readdir as readdir7, rm } from "node:fs/promises";
 import { dirname as dirname6, join as join10 } from "node:path";
 import { pathToFileURL as pathToFileURL8 } from "node:url";
 async function bundleThemeCssIntoArtifacts(cwd) {
-  const themeCssPath = join10(cwd, ".reroute", "theme.css");
+  const cssPath = join10(cwd, ".reroute", "index.css");
   const artifactsPath = join10(cwd, OUTPUT_ARTIFACTS);
   try {
-    const cssContent = await Bun.file(themeCssPath).text();
+    const cssContent = await Bun.file(cssPath).text();
     if (!cssContent)
       return;
     let artifactsContent = await Bun.file(artifactsPath).text();
@@ -7417,7 +7471,7 @@ async function bundleThemeCssIntoArtifacts(cwd) {
       return;
     }
     const cssLine = `
-// Bundled theme.css for compiled binary support
+// Bundled index.css for compiled binary support
 (globalThis as any).__REROUTE_THEME_CSS__ = ${JSON.stringify(cssContent)};
 `;
     const exportIndex = artifactsContent.lastIndexOf("export type RerouteBundle");
@@ -8759,14 +8813,16 @@ async function gen(args) {
       console.log(`[reroute/gen] rebuilding notified (port ${port}, ${data.clients} browser(s))`);
     } catch (_err) {}
   };
-  const notifyReload = async (reason) => {
+  const notifyReload = async (reason, mode = "full") => {
     const port = getPort();
     try {
       const response = await fetch(`http://localhost:${port}/__reroute_reload`, {
-        method: "POST"
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ mode })
       });
       const data = await response.json();
-      console.log(`[reroute/gen] reload notified (port ${port}, ${data.clients} browser(s))${reason ? `: ${reason}` : ""}`);
+      console.log(`[reroute/gen] reload notified (port ${port}, ${data.clients} browser(s), ${mode})${reason ? `: ${reason}` : ""}`);
     } catch {}
   };
   await notifyReload("initial generation");
@@ -8775,30 +8831,35 @@ async function gen(args) {
   let isBuilding = false;
   let pendingBuild = null;
   let skipCurrentBuild = false;
-  function scheduleBuild(buildFn, reason) {
+  function scheduleBuild(buildFn, reason, reloadMode = "full") {
     if (isBuilding) {
       if (!skipCurrentBuild) {
         skipCurrentBuild = true;
         console.log(`[reroute/watch] ⏭️ Superseding current build with: ${reason}`);
       }
-      pendingBuild = { fn: buildFn, reason };
+      pendingBuild = { fn: buildFn, reason, reloadMode };
       return;
     }
     if (pendingBuild) {
       console.log(`[reroute/watch] ⏭️ Replacing queued build with: ${reason}`);
+      const mergedMode = pendingBuild.reloadMode === "css" && reloadMode === "css" ? "css" : "full";
+      pendingBuild = { fn: buildFn, reason, reloadMode: mergedMode };
+    } else {
+      pendingBuild = { fn: buildFn, reason, reloadMode };
     }
-    pendingBuild = { fn: buildFn, reason };
     processPendingBuild();
   }
   async function processPendingBuild() {
     if (!pendingBuild || isBuilding)
       return;
-    const { fn: buildFn, reason } = pendingBuild;
+    const { fn: buildFn, reason, reloadMode } = pendingBuild;
     pendingBuild = null;
     skipCurrentBuild = false;
     isBuilding = true;
     const startTime = performance.now();
-    await notifyRebuilding();
+    if (reloadMode !== "css") {
+      await notifyRebuilding();
+    }
     try {
       await buildFn();
       if (skipCurrentBuild) {
@@ -8807,12 +8868,14 @@ async function gen(args) {
       }
       const duration = ((performance.now() - startTime) / 1000).toFixed(2);
       console.log(`[reroute/watch] ✓ Rebuild complete in ${duration}s (${reason})`);
-      await Bun.sleep(200);
+      if (reloadMode !== "css") {
+        await Bun.sleep(200);
+      }
       if (skipCurrentBuild || pendingBuild) {
         console.log(`[reroute/watch] ⏭️ Skipping reload, new build pending`);
         return;
       }
-      await notifyReload(reason);
+      await notifyReload(reason, reloadMode);
     } catch (err) {
       if (!skipCurrentBuild) {
         console.error(`[reroute/watch] ✗ Build failed (${reason}):`, err);
@@ -8963,13 +9026,14 @@ async function gen(args) {
         }
         const themeSynced = await syncThemeCss(cwd);
         if (themeSynced) {
-          console.log("[reroute/watch]   ├─ Theme CSS synced");
+          console.log("[reroute/watch]   ├─ index.css synced");
         }
       }, "routes change");
     });
   });
   const clientPath = join10(cwd, "src", "client");
   console.log(`[reroute/watch] \uD83D\uDCE6 Watching ${clientPath}...`);
+  let pendingClientFiles = new Set;
   const clientWatcher = watch(clientPath, { recursive: true }, (_ev, filename) => {
     if (!filename)
       return;
@@ -8980,10 +9044,15 @@ async function gen(args) {
       return;
     if (!/\.(tsx|ts|jsx|js|html|md|mdx|css)$/.test(name))
       return;
+    pendingClientFiles.add(name);
     mediumDebounce(() => {
+      const names = [...pendingClientFiles];
+      pendingClientFiles = new Set;
+      const reloadMode = names.every((n) => n.endsWith(".css")) ? "css" : "full";
+      const label = names.length === 1 ? names[0] : `${names.length} files`;
       scheduleBuild(async () => {
-        console.log(`[reroute/watch] \uD83D\uDCE6 Client changed: ${name}`);
-        if (name.endsWith(".ts") || name.endsWith(".tsx")) {
+        console.log(`[reroute/watch] \uD83D\uDCE6 Client changed: ${label}`);
+        if (names.some((n) => n.endsWith(".ts") || n.endsWith(".tsx"))) {
           console.log("[reroute/watch]   ├─ Rebuilding bundle...");
           const bundleStart = performance.now();
           try {
@@ -8997,9 +9066,9 @@ async function gen(args) {
         }
         const themeSynced = await syncThemeCss(cwd);
         if (themeSynced) {
-          console.log("[reroute/watch]   ├─ Theme CSS synced");
+          console.log("[reroute/watch]   ├─ index.css synced");
         }
-      }, "client change");
+      }, "client change", reloadMode);
     });
   });
   console.log(`[reroute/watch] ✓ Watch mode active - ready for changes!
@@ -9096,7 +9165,7 @@ async function waitForServerReady(port = 3000, timeout = 30000) {
         return;
       }
     } catch {}
-    await new Promise((resolve2) => setTimeout(resolve2, checkInterval));
+    await new Promise((resolve3) => setTimeout(resolve3, checkInterval));
     checkInterval = Math.min(checkInterval * 1.5, maxInterval);
   }
   throw new Error(`Timeout waiting for server to respond after ${timeout}ms. ` + `Make sure your server is starting correctly on port ${port}.`);
@@ -19437,12 +19506,12 @@ var require_screen = __commonJS((exports, module) => {
       env: process.env,
       cwd: process.env.HOME
     };
-    function writeFile(callback2) {
+    function writeFile2(callback2) {
       if (!options.value)
         return callback2();
       return fs.writeFile(file, options.value, callback2);
     }
-    return writeFile(function(err) {
+    return writeFile2(function(err) {
       if (err)
         return callback(err);
       return self2.exec(editor, args, opt, function(err2, success) {
@@ -94793,7 +94862,7 @@ Should be of format "before:after"`);
         }
       }
       function objectize(node) {
-        function resolve2(value, key) {
+        function resolve3(value, key) {
           if (!value._parent)
             return;
           if (value._parent._default && value._parent._default[key])
@@ -94816,8 +94885,8 @@ Should be of format "before:after"`);
           if (isObject(value)) {
             if (!value._before && !value._after)
               return objectize(value);
-            value._before = value._before || resolve2(value, "_before");
-            value._after = value._after || resolve2(value, "_after");
+            value._before = value._before || resolve3(value, "_before");
+            value._after = value._after || resolve3(value, "_after");
             return;
           }
           throw new Error("nodes need to be either {String}, {Object} or {Function}." + value + " is neither.");
@@ -103726,7 +103795,7 @@ function getRerouteCommand() {
 async function waitForInitialBuild(genProcess) {
   console.log("[reroute/dev] Waiting for initial build...");
   const outputBuffer = [];
-  const buildCompletePromise = new Promise((resolve2, reject) => {
+  const buildCompletePromise = new Promise((resolve3, reject) => {
     const timeout = setTimeout(() => {
       reject(new Error("Timeout waiting for initial build to complete (120s)"));
     }, 120000);
@@ -103736,7 +103805,7 @@ async function waitForInitialBuild(genProcess) {
         clearTimeout(timeout);
         genProcess.stdout?.removeListener("data", checkComplete);
         genProcess.stderr?.removeListener("data", checkComplete);
-        resolve2();
+        resolve3();
       }
     };
     genProcess.stdout?.on("data", checkComplete);
@@ -103922,7 +103991,7 @@ async function start(args) {
 `);
     const genCommand = useShell ? `${rerouteCmd} gen ${genArgs.join(" ")}` : rerouteCmd;
     const genArgsWithCmd = useShell ? [] : ["gen", ...genArgs];
-    await new Promise((resolve2, reject) => {
+    await new Promise((resolve3, reject) => {
       const genProcess = spawn2(genCommand, genArgsWithCmd, {
         stdio: ["ignore", "pipe", "pipe"],
         shell: useShell
@@ -103933,7 +104002,7 @@ async function start(args) {
         if (code !== null && code !== 0) {
           reject(new Error(`Gen exited with code ${code}`));
         } else {
-          resolve2();
+          resolve3();
         }
       });
       genProcess.on("error", (error) => {
@@ -103974,13 +104043,13 @@ async function start(args) {
       serverProcess.kill("SIGINT");
       process.exit(0);
     });
-    await new Promise((resolve2, reject) => {
+    await new Promise((resolve3, reject) => {
       serverProcess.on("exit", (code) => {
         if (code !== null && code !== 0) {
           console.error(colorizeLogPrefixAnsi(`[reroute/start] Server exited with code ${code}`));
           reject(new Error(`Server exited with code ${code}`));
         } else {
-          resolve2();
+          resolve3();
         }
       });
       serverProcess.on("error", (error) => {
@@ -104042,7 +104111,7 @@ __export(exports_build, {
   default: () => build
 });
 import { spawn as spawn3 } from "node:child_process";
-import { existsSync as existsSync9, readFileSync as readFileSync4, rmSync, unlinkSync } from "node:fs";
+import { existsSync as existsSync9, readFileSync as readFileSync5, rmSync, unlinkSync } from "node:fs";
 import { join as join14 } from "node:path";
 function getRerouteCommand3() {
   const binPath = join14(import.meta.dir, "..", "..", "bin.ts");
@@ -104069,7 +104138,7 @@ function getOutputName() {
   const packageJsonPath = join14(cwd, "package.json");
   if (existsSync9(packageJsonPath)) {
     try {
-      const packageJson = JSON.parse(readFileSync4(packageJsonPath, "utf-8"));
+      const packageJson = JSON.parse(readFileSync5(packageJsonPath, "utf-8"));
       const name = packageJson.name;
       if (name) {
         const parts = name.split("-");
@@ -104111,7 +104180,7 @@ async function cleanRerouteFolder(cwd) {
     process.stdout.write(colorizeLogPrefixAnsi(`[reroute/build] Cleaning .reroute folder...
 `));
     rmSync(rerouteDir, { recursive: true, force: true });
-    await new Promise((resolve2) => setTimeout(resolve2, 100));
+    await new Promise((resolve3) => setTimeout(resolve3, 100));
     process.stdout.write(colorizeLogPrefixAnsi(`[reroute/build] ✓ .reroute folder cleaned
 `));
   }
@@ -104137,7 +104206,7 @@ async function runGenCommand(rerouteCmd, useShell, noCompression) {
   const genArgs = useShell ? [] : ["gen", "--prod", noCompression ? "--no-compression" : ""];
   const genBuffer = { current: "" };
   const handleGenOutput = createOutputHandler(genBuffer);
-  await new Promise((resolve2, reject) => {
+  await new Promise((resolve3, reject) => {
     const genProcess = spawn3(genCommand, genArgs, {
       stdio: ["ignore", "pipe", "pipe"],
       shell: useShell
@@ -104148,7 +104217,7 @@ async function runGenCommand(rerouteCmd, useShell, noCompression) {
       if (code !== null && code !== 0) {
         reject(new Error(`Gen exited with code ${code}`));
       } else {
-        resolve2();
+        resolve3();
       }
     });
     genProcess.on("error", (error) => {
@@ -104319,7 +104388,7 @@ __export(exports_analyze, {
   default: () => analyze
 });
 import { existsSync as existsSync11, statSync } from "node:fs";
-import { readdir as readdir8, readFile, stat as stat5, writeFile } from "node:fs/promises";
+import { readdir as readdir8, readFile, stat as stat5, writeFile as writeFile2 } from "node:fs/promises";
 import { basename as basename3, join as join16, relative as relative3 } from "node:path";
 import Table from "cli-table3";
 async function findChunkBundles(cwd) {
@@ -104426,11 +104495,11 @@ async function findBrowserEntry(cwd) {
     const code = await output.text();
     const actualHash = await generateContentHash2(code);
     const bundlePath = join16(tempDir, `index.${actualHash}.js`);
-    await writeFile(bundlePath, code, "utf-8");
+    await writeFile2(bundlePath, code, "utf-8");
     const mapOutput = result.outputs.find((o) => o.path.endsWith(".map"));
     if (mapOutput) {
       const mapContent = await mapOutput.text();
-      await writeFile(`${bundlePath}.map`, mapContent, "utf-8");
+      await writeFile2(`${bundlePath}.map`, mapContent, "utf-8");
     }
     return bundlePath;
   } catch (error) {
@@ -106348,7 +106417,7 @@ async function analyze(args) {
       const useShell = rerouteCmd.includes(" ");
       const buildCommand = useShell ? `${rerouteCmd} build` : rerouteCmd;
       const buildArgs = useShell ? [] : ["build"];
-      await new Promise((resolve2, reject) => {
+      await new Promise((resolve3, reject) => {
         const buildProcess = spawn4(buildCommand, buildArgs, {
           stdio: "inherit",
           shell: useShell
@@ -106357,7 +106426,7 @@ async function analyze(args) {
           if (code !== null && code !== 0) {
             reject(new Error(`Build exited with code ${code}`));
           } else {
-            resolve2();
+            resolve3();
           }
         });
         buildProcess.on("error", (error) => {
@@ -106420,11 +106489,11 @@ async function analyze(args) {
         const output = result.outputs[0];
         const code = await output.text();
         const analysisEntry = join16(serverAnalysisDir, "index.js");
-        await writeFile(analysisEntry, code, "utf-8");
+        await writeFile2(analysisEntry, code, "utf-8");
         const mapOutput = result.outputs.find((o) => o.path.endsWith(".map"));
         if (mapOutput) {
           const mapContent = await mapOutput.text();
-          await writeFile(`${analysisEntry}.map`, mapContent, "utf-8");
+          await writeFile2(`${analysisEntry}.map`, mapContent, "utf-8");
         }
         entry = analysisEntry;
       }
@@ -106484,7 +106553,7 @@ async function analyze(args) {
       const html2 = await generateHTMLReport(stats, depTree, mainInfo, browserDepTree, browserInfo, initialSearch);
       const { mkdir: mkdir4 } = await import("node:fs/promises");
       await mkdir4(join16(cwd, ".reroute"), { recursive: true });
-      await writeFile(htmlPath, html2, "utf-8");
+      await writeFile2(htmlPath, html2, "utf-8");
       console.log(colorizeLogPrefixAnsi(`[reroute/analyze] HTML report generated: ${relative3(cwd, htmlPath)}
 `));
       if (openBrowser) {
@@ -106563,8 +106632,8 @@ async function killProcessOnPort(port) {
     const proc = spawn4("bunx", ["kill-port", String(port)], {
       stdio: "ignore"
     });
-    await new Promise((resolve2) => {
-      proc.on("close", () => resolve2());
+    await new Promise((resolve3) => {
+      proc.on("close", () => resolve3());
     });
   } catch {}
 }
@@ -106928,7 +106997,7 @@ async function getVersionString2() {
 }
 async function getVersion2() {
   if (true) {
-    return "1.0.0-alpha.0";
+    return "1.0.0-alpha.2";
   }
   const possiblePaths = [
     path3.join(import.meta.dir, "../../../package.json"),
@@ -106945,10 +107014,10 @@ async function getVersion2() {
 }
 async function getCommit2() {
   if (true) {
-    return "9abafce";
+    return "3e34125";
   }
   return "dev";
 }
 main();
 
-//# debugId=CA92814D9FB7179764756E2164756E21
+//# debugId=CC941DD40B19367864756E2164756E21