nukejs 0.0.18 → 0.0.19

package/dist/build-common.js

@@ -721,23 +721,36 @@ async function bundleClientComponents(globalRegistry, pagesDir, staticDir) {
   if (globalRegistry.size === 0) return /* @__PURE__ */ new Map();
   const outDir = path.join(staticDir, "__client-component");
   fs.mkdirSync(outDir, { recursive: true });
-  const prerendered = /* @__PURE__ */ new Map();
+  const entryPoints = {};
   for (const [id, filePath] of globalRegistry) {
+    entryPoints[id] = filePath;
     console.log(`  bundling  client  ${id}  (${path.relative(pagesDir, filePath)})`);
-    const browserResult = await build({
-      entryPoints: [filePath],
-      bundle: true,
-      format: "esm",
-      platform: "browser",
-      jsx: "automatic",
-      minify: true,
-      conditions: ["module", "browser", "import"],
-      banner: { js: `const require=(m)=>{if(m==='react')return window.__nukejs_react__;if(m==='react/jsx-runtime')return window.__nukejs_jsx__;throw new Error('Dynamic require of "'+m+'" is not supported');};` },
-      external: ["react", "react-dom/client", "react/jsx-runtime"],
-      define: { "process.env.NODE_ENV": '"production"' },
-      write: false
-    });
-    fs.writeFileSync(path.join(outDir, `${id}.js`), browserResult.outputFiles[0].text);
+  }
+  await build({
+    entryPoints,
+    bundle: true,
+    splitting: true,
+    // ← shared deps extracted into chunks
+    format: "esm",
+    // splitting requires ESM
+    platform: "browser",
+    jsx: "automatic",
+    minify: true,
+    write: true,
+    // splitting requires write:true + outdir
+    outdir: outDir,
+    conditions: ["module", "browser", "import"],
+    banner: { js: `const require=(m)=>{if(m==='react')return window.__nukejs_react__;if(m==='react/jsx-runtime')return window.__nukejs_jsx__;throw new Error('Dynamic require of "'+m+'" is not supported');};` },
+    external: ["react", "react-dom/client", "react/jsx-runtime"],
+    define: { "process.env.NODE_ENV": '"production"' },
+    entryNames: "[name]",
+    // cc_abc123.js (no hash on entries)
+    chunkNames: "__chunks/[hash]"
+    // __chunks/ABCDEF.js
+  });
+  console.log(`  bundled   ${globalRegistry.size} client component(s) \u2192 ${path.relative(process.cwd(), outDir)}/`);
+  const prerendered = /* @__PURE__ */ new Map();
+  for (const [id, filePath] of globalRegistry) {
     const ssrTmp = path.join(
       path.dirname(filePath),
       `_ssr_${id}_${randomBytes(4).toString("hex")}.mjs`
@@ -766,7 +779,6 @@ async function bundleClientComponents(globalRegistry, pagesDir, staticDir) {
       if (fs.existsSync(ssrTmp)) fs.unlinkSync(ssrTmp);
     }
   }
-  console.log(`  bundled   ${globalRegistry.size} client component(s) \u2192 ${path.relative(process.cwd(), outDir)}/`);
   return prerendered;
 }
 async function buildErrorPages(pagesDir, outPagesDir, prerenderedHtml) {

package/dist/bundler.js

@@ -1,40 +1,89 @@
 import path from "path";
+import fs from "fs";
+import os from "os";
 import { fileURLToPath } from "url";
 import { build } from "esbuild";
 import { log } from "./logger.js";
-import { getComponentById } from "./component-analyzer.js";
+import { getComponentCache } from "./component-analyzer.js";
 let reactBundlePromise = null;
 let nukeBundlePromise = null;
-async function bundleClientComponent(filePath) {
-  const result = await build({
-    entryPoints: [filePath],
+const SPLIT_OUT_DIR = path.join(os.tmpdir(), "nukejs-dev-components");
+let splitBuildValid = false;
+let splitBuildPromise = null;
+async function buildAllComponentsSplit() {
+  const cache = getComponentCache();
+  const clientComponents = /* @__PURE__ */ new Map();
+  for (const [filePath, info] of cache) {
+    if (info.isClientComponent && info.clientComponentId) {
+      clientComponents.set(info.clientComponentId, filePath);
+    }
+  }
+  if (clientComponents.size === 0) {
+    splitBuildValid = true;
+    return;
+  }
+  const entryPoints = {};
+  for (const [id, filePath] of clientComponents) {
+    entryPoints[id] = filePath;
+  }
+  fs.mkdirSync(SPLIT_OUT_DIR, { recursive: true });
+  log.verbose(`[bundler] Split build: ${clientComponents.size} component(s) \u2192 ${SPLIT_OUT_DIR}`);
+  await build({
+    entryPoints,
     bundle: true,
+    splitting: true,
+    // ← shared deps extracted into chunks
     format: "esm",
+    // splitting requires ESM
     platform: "browser",
-    write: false,
     jsx: "automatic",
-    // Prefer ESM exports from dual-mode packages (e.g. radix-ui) to avoid
-    // CJS require() calls that break in an ESM context at runtime.
+    minify: false,
+    // keep readable in dev
+    write: true,
+    // splitting requires write:true + outdir
+    outdir: SPLIT_OUT_DIR,
     conditions: ["module", "browser", "import"],
-    // Shim require() for CJS-only packages that call require('react') at
-    // runtime. Resolves to the already-loaded React instance on window.
+    // Shim require() for CJS packages that call require('react') at runtime.
     banner: { js: `const require=(m)=>{if(m==='react')return window.__nukejs_react__;if(m==='react/jsx-runtime')return window.__nukejs_jsx__;throw new Error('Dynamic require of "'+m+'" is not supported');};` },
-    // Keep React external — resolved by the importmap to /__react.js
-    external: ["react", "react-dom/client", "react/jsx-runtime"]
+    external: ["react", "react-dom/client", "react/jsx-runtime"],
+    define: { "process.env.NODE_ENV": '"development"' },
+    entryNames: "[name]",
+    // cc_abc123.js (stable, no hash)
+    chunkNames: "__chunks/[hash]"
+    // __chunks/ABCDEF.js
   });
-  return result.outputFiles[0].text;
+  splitBuildValid = true;
+  log.verbose("[bundler] Split build complete");
+}
+async function ensureSplitBuild() {
+  if (splitBuildValid) return;
+  if (!splitBuildPromise) {
+    splitBuildPromise = buildAllComponentsSplit().finally(() => {
+      splitBuildPromise = null;
+    });
+  }
+  await splitBuildPromise;
+}
+function invalidateSplitBundle() {
+  splitBuildValid = false;
+  log.verbose("[bundler] Split bundle invalidated");
 }
 async function serveClientComponentBundle(componentId, res) {
-  const filePath = getComponentById(componentId);
-  if (filePath) {
-    log.verbose(`Bundling client component: ${componentId} (${path.basename(filePath)})`);
-    res.setHeader("Content-Type", "application/javascript");
-    res.end(await bundleClientComponent(filePath));
-    return;
+  await ensureSplitBuild();
+  const outPath = path.join(SPLIT_OUT_DIR, `${componentId}.js`);
+  if (!fs.existsSync(outPath)) {
+    log.verbose(`[bundler] ${componentId} not in split build \u2014 rebuilding`);
+    invalidateSplitBundle();
+    await ensureSplitBuild();
+    if (!fs.existsSync(outPath)) {
+      log.error(`Client component not found: ${componentId}`);
+      res.statusCode = 404;
+      res.end("Client component not found");
+      return;
+    }
   }
-  log.error(`Client component not found: ${componentId}`);
-  res.statusCode = 404;
-  res.end("Client component not found");
+  res.setHeader("Content-Type", "application/javascript");
+  res.end(fs.readFileSync(outPath));
 }
 async function serveReactBundle(res) {
   log.verbose("Bundling React runtime");
@@ -105,7 +154,7 @@ async function serveNukeBundle(res) {
   res.end(await nukeBundlePromise);
 }
 export {
-  bundleClientComponent,
+  invalidateSplitBundle,
   serveClientComponentBundle,
   serveNukeBundle,
   serveReactBundle

package/dist/hmr.js

@@ -2,6 +2,7 @@ import { existsSync, watch } from "fs";
 import path from "path";
 import { log } from "./logger.js";
 import { invalidateComponentCache } from "./component-analyzer.js";
+import { invalidateSplitBundle } from "./bundler.js";
 const hmrClients = /* @__PURE__ */ new Set();
 function broadcastHmr(payload) {
   const data = `data: ${JSON.stringify(payload)}
@@ -51,6 +52,7 @@ function watchDir(dir, label) {
       const payload = buildPayload(filename);
       log.info(`[HMR] ${label} changed: ${filename}`, JSON.stringify(payload));
       if (dir) invalidateComponentCache(path.resolve(dir, filename));
+      invalidateSplitBundle();
       broadcastHmr(payload);
       pending.delete(filename);
     }, 100);

package/dist/use-router.d.ts

@@ -2,6 +2,8 @@ type Router = {
     path: string;
     push: (url: string) => void;
     replace: (url: string) => void;
+    back: () => void;
+    refresh: () => void;
 };
 export default function useRouter(): Router;
 export {};

package/dist/use-router.js

@@ -1,26 +1,34 @@
 import { useCallback, useEffect, useState } from "react";
+const SSR_ROUTER = { push: () => {
+}, replace: () => {
+}, back: () => {
+}, refresh: () => {
+}, path: "" };
 function useRouter() {
-  try {
-    const [path, setPath] = useState(() => window.location.pathname);
-    useEffect(() => {
-      const handleLocationChange = () => setPath(window.location.pathname);
-      window.addEventListener("locationchange", handleLocationChange);
-      return () => window.removeEventListener("locationchange", handleLocationChange);
-    }, []);
-    const push = useCallback((url) => {
-      window.history.pushState({}, "", url);
-      setPath(url);
-    }, []);
-    const replace = useCallback((url) => {
-      window.history.replaceState({}, "", url);
-      setPath(url);
-    }, []);
-    return { path, push, replace };
-  } catch {
-    return { push: () => {
-    }, replace: () => {
-    }, path: "" };
+  if (typeof window === "undefined") {
+    return SSR_ROUTER;
   }
+  const [path, setPath] = useState(() => window.location.pathname);
+  useEffect(() => {
+    const handleLocationChange = () => setPath(window.location.pathname);
+    window.addEventListener("locationchange", handleLocationChange);
+    return () => window.removeEventListener("locationchange", handleLocationChange);
+  }, []);
+  const push = useCallback((url) => {
+    window.history.pushState({}, "", url);
+    setPath(url);
+  }, []);
+  const replace = useCallback((url) => {
+    window.history.replaceState({}, "", url);
+    setPath(url);
+  }, []);
+  const back = useCallback(() => {
+    window.history.back();
+  }, []);
+  const refresh = useCallback(() => {
+    window.dispatchEvent(new Event("locationchange"));
+  }, []);
+  return { path, push, replace, back, refresh };
 }
 export {
   useRouter as default

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nukejs",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "A minimal, opinionated full-stack React framework on Node.js that server-renders everything and hydrates only interactive parts.",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",