@webtypen/webframez-react 0.0.3 → 0.0.5

package/README.md

@@ -228,10 +228,10 @@ Recommended scripts:
     "build:server": "webframez-react build:server",
     "build:client": "webframez-react build:client",
     "build": "npm run build:server && npm run build:client",
-    "start": "node --conditions react-server start-server.cjs",
+    "start": "NODE_OPTIONS='--conditions react-server -r @webtypen/webframez-react/register' node start-server.cjs",
     "watch:server": "webframez-react watch:server",
     "watch:client": "webframez-react watch:client",
-    "serve:watch": "node --watch --conditions react-server start-server.cjs",
+    "serve:watch": "NODE_OPTIONS='--conditions react-server -r @webtypen/webframez-react/register' node --watch start-server.cjs",
     "watch": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'",
     "dev": "sh -c 'npm run watch:server & npm run watch:client & npm run serve:watch & wait'"
   }
@@ -242,6 +242,29 @@ Notes:
 - `build` compiles the server output (`pages`, `server.ts`) and the browser client bundle (`client.tsx` + RSC manifests).
 - `start` runs the built app in React Server mode.
 - `watch` / `dev` keep TypeScript and webpack in watch mode and restart Node automatically when server output changes.
+- `@webtypen/webframez-react/register` activates the React Server module register, so `"use client"` modules are treated correctly in Node and in the package's SSR worker.
+
+If you run an existing `webframez-core` app directly with `ts-node` or `node`, use the same preload:
+
+```json
+{
+  "scripts": {
+    "start": "NODE_OPTIONS='--conditions react-server -r @webtypen/webframez-react/register' ts-node ./app.ts",
+    "watch:app": "nodemon --exec \"NODE_OPTIONS='--conditions react-server -r @webtypen/webframez-react/register' ts-node ./app.ts\""
+  }
+}
+```
+
+Or via the shipped wrapper command:
+
+```json
+{
+  "scripts": {
+    "start": "TS_NODE_FILES=true webframez-react exec -- ts-node ./app.ts",
+    "watch:app": "nodemon --exec \"TS_NODE_FILES=true webframez-react exec -- ts-node ./app.ts\""
+  }
+}
+```
 
 ## CLI Config and Custom Entry Paths
 

package/bin/webframez-react.mjs

@@ -27,6 +27,7 @@ function printHelp() {
       "  webframez-react watch:client",
       "  webframez-react build:server:webpack",
       "  webframez-react watch:server:webpack",
+      "  webframez-react exec -- <command> [args...]",
       "",
       "Config fallback order:",
       "  1) project root override file",
@@ -115,6 +116,11 @@ function resolveBinary(name) {
   return name;
 }
 
+function buildReactServerNodeOptions() {
+  const existing = process.env.NODE_OPTIONS ? `${process.env.NODE_OPTIONS} ` : "";
+  return `${existing}--conditions react-server -r @webtypen/webframez-react/register`.trim();
+}
+
 async function loadProjectConfig() {
   const configFiles = [
     "webframez-react.config.mjs",
@@ -259,6 +265,21 @@ async function main() {
     return;
   }
 
+  if (command === "exec") {
+    if (passthroughArgsClean.length === 0) {
+      console.error("[webframez-react] Missing command for exec.");
+      printHelp();
+      process.exit(1);
+    }
+
+    const [binaryName, ...binaryArgs] = passthroughArgsClean;
+    const code = await run(binaryName, binaryArgs, {
+      NODE_OPTIONS: buildReactServerNodeOptions(),
+    });
+    process.exit(code);
+    return;
+  }
+
   if (command === "build:client" || command === "watch:client") {
     const config = resolveConfig("webpack.client.cjs", "webpack.client.cjs");
     console.log(`[webframez-react] webpack config (${config.source}): ${config.path}`);

package/dist/http.cjs

@@ -478,6 +478,68 @@ function parseSearchParams(query) {
 }
 
 // src/http.ts
+var INITIAL_HTML_WORKER_SCRIPT = `
+const path = require("node:path");
+const Module = require("node:module");
+
+const pagesDir = process.env.WEBFRAMEZ_REACT_PAGES_DIR || "";
+if (!pagesDir) {
+  throw new Error("Missing WEBFRAMEZ_REACT_PAGES_DIR");
+}
+
+const appRequire = Module.createRequire(path.join(pagesDir, "__webframez_react_worker__.js"));
+const originalResolveFilename = Module._resolveFilename;
+const forcedResolutions = new Map([
+  ["react", appRequire.resolve("react")],
+  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
+  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
+  ["react-dom/client", appRequire.resolve("react-dom/client")]
+]);
+
+Module._resolveFilename = function(request, parent, isMain, options) {
+  if (forcedResolutions.has(request)) {
+    return forcedResolutions.get(request);
+  }
+  return originalResolveFilename.call(this, request, parent, isMain, options);
+};
+
+const { createFileRouter } = require("@webtypen/webframez-react/router");
+const reactDomPkg = require.resolve("react-dom/package.json", {
+  paths: [process.cwd(), pagesDir]
+});
+const reactDomServer = require(path.join(path.dirname(reactDomPkg), "server.node.js"));
+const router = createFileRouter({ pagesDir });
+
+process.on("message", async (message) => {
+  if (!message || message.type !== "render") {
+    return;
+  }
+
+  const previousBasename = globalThis.__RSC_BASENAME;
+  globalThis.__RSC_BASENAME = message.payload.basename || "";
+
+  try {
+    const resolved = await router.resolve({
+      pathname: message.payload.pathname,
+      searchParams: message.payload.searchParams || {},
+      cookies: message.payload.cookies || {},
+    });
+    const html = reactDomServer.renderToString(resolved.model);
+    if (typeof process.send === "function") {
+      process.send({ id: message.id, ok: true, html });
+    }
+  } catch (error) {
+    const formatted = error && (error.stack || String(error))
+      ? (error.stack || String(error))
+      : "Unknown SSR worker error";
+    if (typeof process.send === "function") {
+      process.send({ id: message.id, ok: false, error: formatted });
+    }
+  } finally {
+    globalThis.__RSC_BASENAME = previousBasename;
+  }
+});
+`;
 function normalizeBasePath(basePath) {
   if (!basePath || basePath === "/") {
     return "";
@@ -497,62 +559,110 @@ function stripBasePath(pathname, basePath) {
   }
   return pathname;
 }
-function runNodeCommand(args) {
-  return new Promise((resolve, reject) => {
-    (0, import_node_child_process.execFile)(process.execPath, args, { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 }, (error, stdout, stderr) => {
-      if (error) {
-        const out = stderr && stderr.trim() !== "" ? stderr : stdout;
-        reject(new Error(out || error.message));
+function createInitialHtmlWorker(pagesDir) {
+  let child = null;
+  let nextRequestId = 1;
+  let stderrBuffer = "";
+  const pending = /* @__PURE__ */ new Map();
+  const rejectPending = (error) => {
+    for (const entry of pending.values()) {
+      clearTimeout(entry.timeout);
+      entry.reject(error);
+    }
+    pending.clear();
+  };
+  const stopWorker = () => {
+    if (!child) {
+      return;
+    }
+    child.removeAllListeners();
+    if (!child.killed) {
+      child.kill();
+    }
+    child = null;
+  };
+  const startWorker = () => {
+    if (child && child.connected && !child.killed) {
+      return child;
+    }
+    stderrBuffer = "";
+    child = (0, import_node_child_process.spawn)(process.execPath, ["-e", INITIAL_HTML_WORKER_SCRIPT], {
+      cwd: process.cwd(),
+      env: {
+        ...process.env,
+        WEBFRAMEZ_REACT_PAGES_DIR: pagesDir
+      },
+      stdio: ["ignore", "ignore", "pipe", "ipc"]
+    });
+    child.on("message", (message) => {
+      if (!message || typeof message.id !== "number") {
+        return;
+      }
+      const entry = pending.get(message.id);
+      if (!entry) {
         return;
       }
-      resolve({ stdout, stderr });
+      pending.delete(message.id);
+      clearTimeout(entry.timeout);
+      if (message.ok) {
+        entry.resolve(message.html);
+        return;
+      }
+      entry.reject(new Error(message.error));
     });
-  });
-}
-async function renderInitialHtmlInWorker(options) {
-  const payload = Buffer.from(JSON.stringify(options), "utf8").toString("base64url");
-  const script = `
-const path = require("node:path");
-const Module = require("node:module");
-const input = JSON.parse(Buffer.from(process.argv[1], "base64url").toString("utf8"));
-globalThis.__RSC_BASENAME = input.basename || "";
-const appRequire = Module.createRequire(path.join(input.pagesDir, "__webframez_react_worker__.js"));
-const originalResolveFilename = Module._resolveFilename;
-const forcedResolutions = new Map([
-  ["react", appRequire.resolve("react")],
-  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
-  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
-  ["react-dom/client", appRequire.resolve("react-dom/client")]
-]);
-Module._resolveFilename = function(request, parent, isMain, options) {
-  if (forcedResolutions.has(request)) {
-    return forcedResolutions.get(request);
-  }
-  return originalResolveFilename.call(this, request, parent, isMain, options);
-};
-const { createFileRouter } = require("webframez-react/router");
-const reactDomPkg = require.resolve("react-dom/package.json", {
-  paths: [process.cwd(), input.pagesDir]
-});
-const reactDomServer = require(path.join(path.dirname(reactDomPkg), "server.node.js"));
-
-(async () => {
-  const router = createFileRouter({ pagesDir: input.pagesDir });
-  const resolved = await router.resolve({
-    pathname: input.pathname,
-    searchParams: input.searchParams || {},
-    cookies: input.cookies || {},
-  });
-  const html = reactDomServer.renderToString(resolved.model);
-  process.stdout.write(JSON.stringify({ html }));
-})().catch((error) => {
-  process.stderr.write(error && (error.stack || String(error)) ? (error.stack || String(error)) : "Unknown SSR worker error");
-  process.exit(1);
-});
-`;
-  const { stdout } = await runNodeCommand(["-e", script, payload]);
-  const parsed = JSON.parse(stdout || "{}");
-  return parsed.html || "";
+    child.stderr?.on("data", (chunk) => {
+      stderrBuffer = `${stderrBuffer}${chunk.toString("utf8")}`.slice(-8192);
+    });
+    child.on("exit", (code, signal) => {
+      const suffix = stderrBuffer.trim() !== "" ? `
+${stderrBuffer.trim()}` : "";
+      rejectPending(
+        new Error(
+          `[webframez-react] Initial HTML worker exited (${signal ?? code ?? "unknown"})${suffix}`
+        )
+      );
+      child = null;
+    });
+    child.on("error", (error) => {
+      rejectPending(error instanceof Error ? error : new Error(String(error)));
+      child = null;
+    });
+    return child;
+  };
+  return {
+    render(payload) {
+      const activeChild = startWorker();
+      const requestId = nextRequestId++;
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          rejectPending(new Error("[webframez-react] Initial HTML worker timed out"));
+          stopWorker();
+        }, 1e4);
+        pending.set(requestId, { resolve, reject, timeout });
+        const request = {
+          id: requestId,
+          type: "render",
+          payload
+        };
+        activeChild.send(request, (error) => {
+          if (!error) {
+            return;
+          }
+          const entry = pending.get(requestId);
+          if (!entry) {
+            return;
+          }
+          pending.delete(requestId);
+          clearTimeout(entry.timeout);
+          entry.reject(error instanceof Error ? error : new Error(String(error)));
+        });
+      });
+    },
+    dispose() {
+      rejectPending(new Error("[webframez-react] Initial HTML worker disposed"));
+      stopWorker();
+    }
+  };
 }
 function withRequestBasename(basename, fn) {
   const target = globalThis;
@@ -612,6 +722,13 @@ function createNodeRequestHandler(options) {
   const liveReloadClients = /* @__PURE__ */ new Set();
   const router = createFileRouter({ pagesDir });
   const moduleMap = JSON.parse(import_node_fs2.default.readFileSync(manifestPath, "utf-8"));
+  const initialHtmlWorker = createInitialHtmlWorker(pagesDir);
+  const disposeInitialHtmlWorker = () => {
+    initialHtmlWorker.dispose();
+  };
+  process.once("exit", disposeInitialHtmlWorker);
+  process.once("SIGINT", disposeInitialHtmlWorker);
+  process.once("SIGTERM", disposeInitialHtmlWorker);
   return async function handleRequest(req, res) {
     if (!req.url) {
       res.statusCode = 400;
@@ -711,8 +828,7 @@ function createNodeRequestHandler(options) {
     );
     let rootHtml = "";
     try {
-      rootHtml = await renderInitialHtmlInWorker({
-        pagesDir,
+      rootHtml = await initialHtmlWorker.render({
         pathname: stripBasePath(url.pathname, basePath),
         searchParams: parseSearchParams(url.searchParams),
         cookies: requestCookies,

package/dist/http.js

@@ -9,7 +9,7 @@ var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require
 // src/http.ts
 import fs2 from "node:fs";
 import path2 from "node:path";
-import { execFile } from "node:child_process";
+import { spawn } from "node:child_process";
 
 // src/server.ts
 import { renderToPipeableStream } from "react-server-dom-webpack/server";
@@ -453,6 +453,68 @@ function parseSearchParams(query) {
 }
 
 // src/http.ts
+var INITIAL_HTML_WORKER_SCRIPT = `
+const path = require("node:path");
+const Module = require("node:module");
+
+const pagesDir = process.env.WEBFRAMEZ_REACT_PAGES_DIR || "";
+if (!pagesDir) {
+  throw new Error("Missing WEBFRAMEZ_REACT_PAGES_DIR");
+}
+
+const appRequire = Module.createRequire(path.join(pagesDir, "__webframez_react_worker__.js"));
+const originalResolveFilename = Module._resolveFilename;
+const forcedResolutions = new Map([
+  ["react", appRequire.resolve("react")],
+  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
+  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
+  ["react-dom/client", appRequire.resolve("react-dom/client")]
+]);
+
+Module._resolveFilename = function(request, parent, isMain, options) {
+  if (forcedResolutions.has(request)) {
+    return forcedResolutions.get(request);
+  }
+  return originalResolveFilename.call(this, request, parent, isMain, options);
+};
+
+const { createFileRouter } = require("@webtypen/webframez-react/router");
+const reactDomPkg = require.resolve("react-dom/package.json", {
+  paths: [process.cwd(), pagesDir]
+});
+const reactDomServer = require(path.join(path.dirname(reactDomPkg), "server.node.js"));
+const router = createFileRouter({ pagesDir });
+
+process.on("message", async (message) => {
+  if (!message || message.type !== "render") {
+    return;
+  }
+
+  const previousBasename = globalThis.__RSC_BASENAME;
+  globalThis.__RSC_BASENAME = message.payload.basename || "";
+
+  try {
+    const resolved = await router.resolve({
+      pathname: message.payload.pathname,
+      searchParams: message.payload.searchParams || {},
+      cookies: message.payload.cookies || {},
+    });
+    const html = reactDomServer.renderToString(resolved.model);
+    if (typeof process.send === "function") {
+      process.send({ id: message.id, ok: true, html });
+    }
+  } catch (error) {
+    const formatted = error && (error.stack || String(error))
+      ? (error.stack || String(error))
+      : "Unknown SSR worker error";
+    if (typeof process.send === "function") {
+      process.send({ id: message.id, ok: false, error: formatted });
+    }
+  } finally {
+    globalThis.__RSC_BASENAME = previousBasename;
+  }
+});
+`;
 function normalizeBasePath(basePath) {
   if (!basePath || basePath === "/") {
     return "";
@@ -472,62 +534,110 @@ function stripBasePath(pathname, basePath) {
   }
   return pathname;
 }
-function runNodeCommand(args) {
-  return new Promise((resolve, reject) => {
-    execFile(process.execPath, args, { timeout: 1e4, maxBuffer: 1024 * 1024 * 5 }, (error, stdout, stderr) => {
-      if (error) {
-        const out = stderr && stderr.trim() !== "" ? stderr : stdout;
-        reject(new Error(out || error.message));
+function createInitialHtmlWorker(pagesDir) {
+  let child = null;
+  let nextRequestId = 1;
+  let stderrBuffer = "";
+  const pending = /* @__PURE__ */ new Map();
+  const rejectPending = (error) => {
+    for (const entry of pending.values()) {
+      clearTimeout(entry.timeout);
+      entry.reject(error);
+    }
+    pending.clear();
+  };
+  const stopWorker = () => {
+    if (!child) {
+      return;
+    }
+    child.removeAllListeners();
+    if (!child.killed) {
+      child.kill();
+    }
+    child = null;
+  };
+  const startWorker = () => {
+    if (child && child.connected && !child.killed) {
+      return child;
+    }
+    stderrBuffer = "";
+    child = spawn(process.execPath, ["-e", INITIAL_HTML_WORKER_SCRIPT], {
+      cwd: process.cwd(),
+      env: {
+        ...process.env,
+        WEBFRAMEZ_REACT_PAGES_DIR: pagesDir
+      },
+      stdio: ["ignore", "ignore", "pipe", "ipc"]
+    });
+    child.on("message", (message) => {
+      if (!message || typeof message.id !== "number") {
+        return;
+      }
+      const entry = pending.get(message.id);
+      if (!entry) {
         return;
       }
-      resolve({ stdout, stderr });
+      pending.delete(message.id);
+      clearTimeout(entry.timeout);
+      if (message.ok) {
+        entry.resolve(message.html);
+        return;
+      }
+      entry.reject(new Error(message.error));
     });
-  });
-}
-async function renderInitialHtmlInWorker(options) {
-  const payload = Buffer.from(JSON.stringify(options), "utf8").toString("base64url");
-  const script = `
-const path = require("node:path");
-const Module = require("node:module");
-const input = JSON.parse(Buffer.from(process.argv[1], "base64url").toString("utf8"));
-globalThis.__RSC_BASENAME = input.basename || "";
-const appRequire = Module.createRequire(path.join(input.pagesDir, "__webframez_react_worker__.js"));
-const originalResolveFilename = Module._resolveFilename;
-const forcedResolutions = new Map([
-  ["react", appRequire.resolve("react")],
-  ["react/jsx-runtime", appRequire.resolve("react/jsx-runtime")],
-  ["react/jsx-dev-runtime", appRequire.resolve("react/jsx-dev-runtime")],
-  ["react-dom/client", appRequire.resolve("react-dom/client")]
-]);
-Module._resolveFilename = function(request, parent, isMain, options) {
-  if (forcedResolutions.has(request)) {
-    return forcedResolutions.get(request);
-  }
-  return originalResolveFilename.call(this, request, parent, isMain, options);
-};
-const { createFileRouter } = require("webframez-react/router");
-const reactDomPkg = require.resolve("react-dom/package.json", {
-  paths: [process.cwd(), input.pagesDir]
-});
-const reactDomServer = require(path.join(path.dirname(reactDomPkg), "server.node.js"));
-
-(async () => {
-  const router = createFileRouter({ pagesDir: input.pagesDir });
-  const resolved = await router.resolve({
-    pathname: input.pathname,
-    searchParams: input.searchParams || {},
-    cookies: input.cookies || {},
-  });
-  const html = reactDomServer.renderToString(resolved.model);
-  process.stdout.write(JSON.stringify({ html }));
-})().catch((error) => {
-  process.stderr.write(error && (error.stack || String(error)) ? (error.stack || String(error)) : "Unknown SSR worker error");
-  process.exit(1);
-});
-`;
-  const { stdout } = await runNodeCommand(["-e", script, payload]);
-  const parsed = JSON.parse(stdout || "{}");
-  return parsed.html || "";
+    child.stderr?.on("data", (chunk) => {
+      stderrBuffer = `${stderrBuffer}${chunk.toString("utf8")}`.slice(-8192);
+    });
+    child.on("exit", (code, signal) => {
+      const suffix = stderrBuffer.trim() !== "" ? `
+${stderrBuffer.trim()}` : "";
+      rejectPending(
+        new Error(
+          `[webframez-react] Initial HTML worker exited (${signal ?? code ?? "unknown"})${suffix}`
+        )
+      );
+      child = null;
+    });
+    child.on("error", (error) => {
+      rejectPending(error instanceof Error ? error : new Error(String(error)));
+      child = null;
+    });
+    return child;
+  };
+  return {
+    render(payload) {
+      const activeChild = startWorker();
+      const requestId = nextRequestId++;
+      return new Promise((resolve, reject) => {
+        const timeout = setTimeout(() => {
+          rejectPending(new Error("[webframez-react] Initial HTML worker timed out"));
+          stopWorker();
+        }, 1e4);
+        pending.set(requestId, { resolve, reject, timeout });
+        const request = {
+          id: requestId,
+          type: "render",
+          payload
+        };
+        activeChild.send(request, (error) => {
+          if (!error) {
+            return;
+          }
+          const entry = pending.get(requestId);
+          if (!entry) {
+            return;
+          }
+          pending.delete(requestId);
+          clearTimeout(entry.timeout);
+          entry.reject(error instanceof Error ? error : new Error(String(error)));
+        });
+      });
+    },
+    dispose() {
+      rejectPending(new Error("[webframez-react] Initial HTML worker disposed"));
+      stopWorker();
+    }
+  };
 }
 function withRequestBasename(basename, fn) {
   const target = globalThis;
@@ -587,6 +697,13 @@ function createNodeRequestHandler(options) {
   const liveReloadClients = /* @__PURE__ */ new Set();
   const router = createFileRouter({ pagesDir });
   const moduleMap = JSON.parse(fs2.readFileSync(manifestPath, "utf-8"));
+  const initialHtmlWorker = createInitialHtmlWorker(pagesDir);
+  const disposeInitialHtmlWorker = () => {
+    initialHtmlWorker.dispose();
+  };
+  process.once("exit", disposeInitialHtmlWorker);
+  process.once("SIGINT", disposeInitialHtmlWorker);
+  process.once("SIGTERM", disposeInitialHtmlWorker);
   return async function handleRequest(req, res) {
     if (!req.url) {
       res.statusCode = 400;
@@ -686,8 +803,7 @@ function createNodeRequestHandler(options) {
     );
     let rootHtml = "";
     try {
-      rootHtml = await renderInitialHtmlInWorker({
-        pagesDir,
+      rootHtml = await initialHtmlWorker.render({
         pathname: stripBasePath(url.pathname, basePath),
         searchParams: parseSearchParams(url.searchParams),
         cookies: requestCookies,