@aaqu/fromcubes-portal-react 0.1.0-alpha.7 → 0.1.0-alpha.8

package/nodes/portal-react.js

@@ -1,9 +1,9 @@
 /**
  * @aaqu/fromcubes-portal-react
  *
- * Server-side JSX transpilation & bundling via esbuild.
- * Deploy-safe: handles rapid redeploys without leaking WS connections or stale routes.
- * Transpiled JS is cached by content hash — unchanged code skips recompilation on redeploy.
+ * Node-RED node that serves React apps from configurable HTTP endpoints
+ * with live WebSocket data binding. JSX is transpiled server-side via esbuild
+ * at deploy time — browsers receive pre-compiled JS.
  */
 
 const crypto = require("crypto");
@@ -11,16 +11,6 @@ const fs = require("fs");
 const path = require("path");
 const esbuild = require("esbuild");
 
-const reactBundle = fs.readFileSync(
-  path.join(__dirname, "vendor", "react-19.production.min.js"),
-  "utf8",
-);
-const reactHash = crypto
-  .createHash("sha256")
-  .update(reactBundle)
-  .digest("hex")
-  .slice(0, 10);
-
 module.exports = function (RED) {
   // ── Admin root prefix (for correct URLs when httpAdminRoot is set) ──
   const adminRoot = (RED.settings.httpAdminRoot || "/").replace(/\/$/, "");
@@ -63,6 +53,12 @@ module.exports = function (RED) {
   }
   const rebuildCallbacks = RED.settings.fcRebuildCallbacks;
 
+  // Vendor bundle cache: cacheKey → { js, hash }
+  if (!RED.settings.fcVendorCache) {
+    RED.settings.fcVendorCache = {};
+  }
+  const vendorCache = RED.settings.fcVendorCache;
+
   // ── Helpers ───────────────────────────────────────────────────
 
   function hash(str) {
@@ -92,12 +88,112 @@ module.exports = function (RED) {
     return twCompiled;
   }
 
-  function transpile(jsx) {
+  // Package root — where react/react-dom live (this package's own node_modules)
+  const pkgRoot = path.join(__dirname, "..");
+  // userDir — where dynamicModuleList installs user packages
+  const userDir = RED.settings.userDir || path.join(__dirname, "../../..");
+  // esbuild resolveDir: package root (react is here); nodePaths adds userDir for user libs
+  const resolveDir = pkgRoot;
+
+  function getPackageName(moduleSpec) {
+    const m = moduleSpec.match(/^((?:@[^/]+\/)?[^/]+)/);
+    return m ? m[1] : moduleSpec;
+  }
+
+  function getInstalledVersion(pkgName) {
+    try {
+      const pkgJson = require(
+        require.resolve(pkgName + "/package.json", { paths: [pkgRoot, userDir] }),
+      );
+      return pkgJson.version;
+    } catch {
+      return null;
+    }
+  }
+
+  function buildVendorBundle(libs) {
+    const lines = [
+      'import React from "react";',
+      'import ReactDOM from "react-dom";',
+      'import { createRoot } from "react-dom/client";',
+      "window.React = React;",
+      "window.ReactDOM = ReactDOM;",
+      "window.ReactDOM.createRoot = createRoot;",
+    ];
+    if (libs.length > 0) {
+      lines.push("if(!window.__pkg) window.__pkg = {};");
+      libs.forEach((lib, i) => {
+        lines.push(`import * as __p${i} from ${JSON.stringify(lib.module)};`);
+        lines.push(`window.__pkg[${JSON.stringify(lib.module)}] = __p${i};`);
+      });
+    }
+    const contents = lines.join("\n");
+    const buildResult = esbuild.buildSync({
+      stdin: { contents, resolveDir, loader: "js" },
+      bundle: true,
+      format: "iife",
+      minify: true,
+      write: false,
+      target: ["es2020"],
+      define: { "process.env.NODE_ENV": '"production"' },
+      nodePaths: [path.join(userDir, "node_modules")],
+    });
+    const js = buildResult.outputFiles[0].text;
+    const h = hash(js);
+    return { js, hash: h };
+  }
+
+  function getVendorBundle(libs) {
+    // Build cache key from actual installed versions
+    const keyParts = ["react@" + getInstalledVersion("react")];
+    for (const lib of libs) {
+      keyParts.push(lib.module + "@" + getInstalledVersion(getPackageName(lib.module)));
+    }
+    keyParts.sort();
+    const cacheKey = hash(JSON.stringify(keyParts));
+
+    if (vendorCache[cacheKey]) return vendorCache[cacheKey];
+
+    const bundle = buildVendorBundle(libs);
+    vendorCache[cacheKey] = bundle;
+    return bundle;
+  }
+
+  function transpile(jsx, libs) {
+    const externalList = ["react", "react-dom", "react-dom/client"];
+    if (libs) {
+      libs.forEach((lib) => {
+        if (!externalList.includes(lib.module)) {
+          externalList.push(lib.module);
+        }
+      });
+    }
+
+    // Auto-detect require() calls in JSX and add them as externals
+    const requireRe = /\brequire\s*\(\s*['"]([^'"]+)['"]\s*\)/g;
+    let m;
+    while ((m = requireRe.exec(jsx)) !== null) {
+      if (!externalList.includes(m[1])) {
+        externalList.push(m[1]);
+      }
+    }
+
+    const requireShim = [
+      "var require = (function() {",
+      '  var _r = {"react":window.React, "react-dom":window.ReactDOM, "react-dom/client":window.ReactDOM};',
+      "  return function(m) {",
+      "    if (_r[m]) return _r[m];",
+      "    if (window.__pkg && window.__pkg[m]) return window.__pkg[m];",
+      '    throw new Error("Module not found: " + m);',
+      "  };",
+      "})();",
+    ].join("\n");
+
     try {
       const buildResult = esbuild.buildSync({
         stdin: {
           contents: jsx,
-          resolveDir: path.join(__dirname, "../../.."),
+          resolveDir,
           loader: "jsx",
         },
         bundle: true,
@@ -107,8 +203,9 @@ module.exports = function (RED) {
         jsx: "transform",
         jsxFactory: "React.createElement",
         jsxFragment: "React.Fragment",
-        external: ["react", "react-dom"],
+        external: externalList,
         define: { "process.env.NODE_ENV": '"production"' },
+        banner: { js: requireShim },
       });
       return { js: buildResult.outputFiles[0].text, error: null };
     } catch (e) {
@@ -137,10 +234,14 @@ module.exports = function (RED) {
   function extractPortalUser(headers) {
     const user = {};
     if (headers["x-portal-user-id"]) user.userId = headers["x-portal-user-id"];
-    if (headers["x-portal-user-name"]) user.userName = headers["x-portal-user-name"];
-    if (headers["x-portal-user-username"]) user.username = headers["x-portal-user-username"];
-    if (headers["x-portal-user-email"]) user.email = headers["x-portal-user-email"];
-    if (headers["x-portal-user-role"]) user.role = headers["x-portal-user-role"];
+    if (headers["x-portal-user-name"])
+      user.userName = headers["x-portal-user-name"];
+    if (headers["x-portal-user-username"])
+      user.username = headers["x-portal-user-username"];
+    if (headers["x-portal-user-email"])
+      user.email = headers["x-portal-user-email"];
+    if (headers["x-portal-user-role"])
+      user.role = headers["x-portal-user-role"];
     if (headers["x-portal-user-groups"]) {
       try {
         user.groups = JSON.parse(headers["x-portal-user-groups"]);
@@ -209,11 +310,13 @@ module.exports = function (RED) {
     const nodeId = node.id;
 
     // Config
-    const endpoint = (config.endpoint || "/portal").replace(/\/+$/, "");
+    const endpoint = (config.endpoint || "/fromcubes").replace(/\/+$/, "");
     const componentCode = config.componentCode || "";
     const pageTitle = config.pageTitle || "Portal";
     const customHead = config.customHead || "";
     const portalAuth = config.portalAuth === true;
+    const showWsStatus = config.showWsStatus === true;
+    const libs = config.libs || [];
 
     // State
     const clients = new Set();
@@ -226,19 +329,51 @@ module.exports = function (RED) {
     // ── Rebuild: transpile JSX + update page state ────────────
 
     function rebuild() {
-      // Topological sort: components used by others come first
-      const entries = Object.entries(registry);
-      const names = entries.map(([n]) => n);
+      // Build or get cached vendor bundle
+      let vendorBundle;
+      try {
+        vendorBundle = getVendorBundle(libs);
+      } catch (e) {
+        node.error("Vendor bundle failed: " + e.message);
+        node.status({ fill: "red", shape: "dot", text: "vendor build error" });
+        return;
+      }
+
+      // Selective injection: only include components referenced in user code (+ transitive deps)
+      const allEntries = Object.entries(registry);
+      const needed = new Set();
+
+      function addWithDeps(name) {
+        if (needed.has(name)) return;
+        const entry = registry[name];
+        if (!entry) return;
+        needed.add(name);
+        for (const [other] of allEntries) {
+          if (other !== name && entry.code.includes(other)) {
+            addWithDeps(other);
+          }
+        }
+      }
+
+      for (const [name] of allEntries) {
+        if (componentCode.includes(name)) {
+          addWithDeps(name);
+        }
+      }
+
+      // Topological sort only needed components
+      const entries = allEntries.filter(([n]) => needed.has(n));
       entries.sort((a, b) => {
         const aUsesB = a[1].code.includes(b[0]);
         const bUsesA = b[1].code.includes(a[0]);
-        if (aUsesB && !bUsesA) return 1;  // a depends on b → b first
+        if (aUsesB && !bUsesA) return 1; // a depends on b → b first
         if (bUsesA && !aUsesB) return -1; // b depends on a → a first
         return 0;
       });
       const libraryJsx = entries
-        .map(([name, c]) =>
-          `// Library: ${name}\nconst ${name} = (() => {\n${c.code}\nreturn ${name};\n})();`
+        .map(
+          ([name, c]) =>
+            `// Library: ${name}\nconst ${name} = (() => {\n${c.code}\nreturn ${name};\n})();`,
         )
         .join("\n\n");
 
@@ -248,17 +383,19 @@ module.exports = function (RED) {
         "const { createContext, memo, forwardRef, Fragment } = React;",
         "",
         "// ── useNodeRed hook ──",
-        `function useNodeRed() {
-  const [data, setData] = React.useState(window.__NR._lastData);
-  React.useEffect(() => {
-    return window.__NR.subscribe(setData);
-  }, []);
-  const send = React.useCallback((payload, topic) => {
-    window.__NR.send(payload, topic);
-  }, []);
-  const user = window.__NR._user || null;
-  return { data, send, user };
-}`,
+        [
+          "function useNodeRed() {",
+          "  const [data, setData] = React.useState(window.__NR._lastData);",
+          "  React.useEffect(() => {",
+          "    return window.__NR.subscribe(setData);",
+          "  }, []);",
+          "  const send = React.useCallback((payload, topic) => {",
+          "    window.__NR.send(payload, topic);",
+          "  }, []);",
+          "  const user = window.__NR._user || null;",
+          "  return { data, send, user };",
+          "}",
+        ].join("\n"),
         "",
         "// ── Library components ──",
         libraryJsx,
@@ -270,7 +407,7 @@ module.exports = function (RED) {
         "ReactDOM.createRoot(document.getElementById('root')).render(React.createElement(App));",
       ].join("\n");
 
-      const compiled = transpile(fullJsx);
+      const compiled = transpile(fullJsx, libs);
 
       if (compiled.error) {
         node.error("JSX transpile error: " + compiled.error);
@@ -301,6 +438,8 @@ module.exports = function (RED) {
         wsPath,
         customHead,
         portalAuth,
+        showWsStatus,
+        vendorHash: vendorBundle.hash,
       };
     }
 
@@ -328,7 +467,9 @@ module.exports = function (RED) {
             return;
           }
           const cssHash = await state.cssHashReady;
-          const user = state.portalAuth ? extractPortalUser(_req.headers) : null;
+          const user = state.portalAuth
+            ? extractPortalUser(_req.headers)
+            : null;
           res
             .type("text/html")
             .send(
@@ -339,6 +480,8 @@ module.exports = function (RED) {
                 state.customHead,
                 cssHash,
                 user,
+                state.showWsStatus,
+                state.vendorHash,
               ),
             );
         });
@@ -500,7 +643,9 @@ module.exports = function (RED) {
     }); // end setImmediate
   }
 
-  RED.nodes.registerType("portal-react", PortalReactNode);
+  RED.nodes.registerType("portal-react", PortalReactNode, {
+    dynamicModuleList: "libs",
+  });
 
   // ── Serve Monaco editor files locally ────────────────────────
   const express = require("express");
@@ -536,14 +681,21 @@ module.exports = function (RED) {
     res.send(css);
   });
 
-  // ── Vendor React bundle endpoint ────────────────────────────
-  RED.httpAdmin.get("/portal-react/vendor/react.min.js", (_req, res) => {
+  // ── Vendor bundle endpoint (dynamic, hash-based) ───────────
+  RED.httpAdmin.get("/portal-react/vendor/:hash.js", (req, res) => {
+    const entry = Object.values(vendorCache).find(
+      (v) => v.hash === req.params.hash,
+    );
+    if (!entry) {
+      res.status(404).send("Not found");
+      return;
+    }
     res.set({
       "Content-Type": "application/javascript",
       "Cache-Control": "public, max-age=31536000, immutable",
-      ETag: `"${reactHash}"`,
+      ETag: `"${req.params.hash}"`,
     });
-    res.send(reactBundle);
+    res.send(entry.js);
   });
 
   // ── Admin API for component registry ──────────────────────────
@@ -570,95 +722,116 @@ module.exports = function (RED) {
 
   // ── Page builders ─────────────────────────────────────────────
 
-  function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user) {
+  function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user, showWsStatus, vendorHash) {
     return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1.0">
-<title>${esc(title)}</title>
-<script src="${adminRoot}/portal-react/vendor/react.min.js?v=${reactHash}"><\/script>
-${cssHash ? `<link rel="stylesheet" href="${adminRoot}/portal-react/css/${cssHash}.css">` : ""}
-${escScript(customHead)}
-<style>
-@layer base{
-*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
-body{font-family:system-ui,-apple-system,sans-serif;background:#0a0a0a;color:#e0e0e0}
-#root{min-height:100vh}
-}
-#__cs{position:fixed;bottom:6px;right:6px;padding:3px 8px;font-size:10px;border-radius:3px;z-index:99999;background:#111;border:1px solid #333;opacity:.7;transition:opacity .2s}
-#__cs:hover{opacity:1}
-#__cs.ok{color:#4ade80}
-#__cs.err{color:#f87171}
-</style>
-</head>
-<body>
-<div id="root"></div>
-<div id="__cs" class="err">disconnected</div>
-<script>
-window.__NR={
-  _ws:null,_listeners:new Set(),_lastData:null,_retries:0,_wasConnected:false,_version:null,_user:${user ? escScript(JSON.stringify(user)) : 'null'},
-  connect(){
-    const p=location.protocol==='https:'?'wss:':'ws:';
-    const ws=new WebSocket(p+'//'+location.host+'${wsPath}');
-    this._ws=ws;
-    const s=document.getElementById('__cs');
-    ws.onopen=()=>{
-      if(this._wasConnected){s.textContent='connected';s.className='ok';this._retries=0;return;}
-      s.textContent='connected';s.className='ok';this._retries=0;this._wasConnected=true;
-    };
-    ws.onmessage=(e)=>{
-      try{const m=JSON.parse(e.data);
-        if(m.type==='version'){if(this._version&&this._version!==m.hash){location.reload();return;}this._version=m.hash;}
-        if(m.type==='data'){this._lastData=m.payload;this._listeners.forEach(fn=>fn(m.payload));}
-      }catch(err){console.error('WS parse',err);}
-    };
-    ws.onclose=(e)=>{
-      s.textContent='disconnected';s.className='err';
-      this._ws=null;
-      const delay=Math.min(500*Math.pow(2,this._retries),8000);
-      this._retries++;
-      setTimeout(()=>this.connect(),delay);
-    };
-    ws.onerror=()=>ws.close();
-  },
-  subscribe(fn){
-    this._listeners.add(fn);
-    if(this._lastData!==null)fn(this._lastData);
-    return()=>this._listeners.delete(fn);
-  },
-  send(payload,topic){
-    if(this._ws&&this._ws.readyState===1)
-      this._ws.send(JSON.stringify({type:'output',payload,topic:topic||''}));
-  }
-};
-window.__NR.connect();
-<\/script>
-<script>
-${escScript(transpiledJs)}
-<\/script>
-</body>
-</html>`;
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width,initial-scale=1.0">
+      <title>${esc(title)}</title>
+      <script src="${adminRoot}/portal-react/vendor/${vendorHash}.js"><\/script>
+      ${cssHash ? `<link rel="stylesheet" href="${adminRoot}/portal-react/css/${cssHash}.css">` : ""}
+      ${escScript(customHead)}
+      ${showWsStatus ? `<style>
+        #__cs {
+          position: fixed; bottom: 6px; right: 6px;
+          padding: 3px 8px; font-size: 10px; border-radius: 3px;
+          z-index: 99999; background: #111; border: 1px solid #333;
+          opacity: .7; transition: opacity .2s;
+        }
+        #__cs:hover { opacity: 1 }
+        #__cs.ok { color: #4ade80 }
+        #__cs.err { color: #f87171 }
+      </style>` : ""}
+    </head>
+    <body>
+      <div id="root"></div>
+      ${showWsStatus ? `<div id="__cs" class="err">fromcubes</div>` : ""}
+      <script>
+        window.__NR = {
+          _ws: null,
+          _listeners: new Set(),
+          _lastData: null,
+          _retries: 0,
+          _wasConnected: false,
+          _version: null,
+          _user: ${user ? escScript(JSON.stringify(user)) : "null"},
+
+          connect() {
+            const p = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            const ws = new WebSocket(p + '//' + location.host + '${wsPath}');
+            this._ws = ws;
+            const s = document.getElementById('__cs');
+
+            ws.onopen = () => {
+              if (s) { s.textContent = 'fromcubes \u2022 connected'; s.className = 'ok'; }
+              this._retries = 0;
+              this._wasConnected = true;
+            };
+
+            ws.onmessage = (e) => {
+              try {
+                const m = JSON.parse(e.data);
+                if (m.type === 'version') {
+                  if (this._version && this._version !== m.hash) { location.reload(); return; }
+                  this._version = m.hash;
+                }
+                if (m.type === 'data') {
+                  this._lastData = m.payload;
+                  this._listeners.forEach(fn => fn(m.payload));
+                }
+              } catch (err) { console.error('WS parse', err); }
+            };
+
+            ws.onclose = () => {
+              if (s) { s.textContent = 'fromcubes \u2022 disconnected'; s.className = 'err'; }
+              this._ws = null;
+              const delay = Math.min(500 * Math.pow(2, this._retries), 8000);
+              this._retries++;
+              setTimeout(() => this.connect(), delay);
+            };
+
+            ws.onerror = () => ws.close();
+          },
+
+          subscribe(fn) {
+            this._listeners.add(fn);
+            if (this._lastData !== null) fn(this._lastData);
+            return () => this._listeners.delete(fn);
+          },
+
+          send(payload, topic) {
+            if (this._ws && this._ws.readyState === 1)
+              this._ws.send(JSON.stringify({ type: 'output', payload, topic: topic || '' }));
+          }
+        };
+        window.__NR.connect();
+      <\/script>
+      <script>
+        ${escScript(transpiledJs)}
+      <\/script>
+    </body>
+    </html>`;
   }
 
   function buildErrorPage(title, error) {
     return `<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<title>${esc(title)} — Error</title>
-<style>
-body{font-family:monospace;background:#1a0000;color:#f87171;padding:40px;line-height:1.6}
-h1{color:#ff4444;margin-bottom:16px}
-pre{background:#0a0a0a;border:1px solid #ff4444;border-radius:8px;padding:20px;overflow-x:auto;color:#fca5a5}
-</style>
-</head>
-<body>
-<h1>JSX Transpile Error</h1>
-<p>Fix the component code in Node-RED and deploy again.</p>
-<pre>${esc(error)}</pre>
-</body>
-</html>`;
+    <html lang="en">
+    <head>
+      <meta charset="UTF-8">
+      <title>${esc(title)} — Error</title>
+      <style>
+        body { font-family: monospace; background: #1a0000; color: #f87171; padding: 40px; line-height: 1.6 }
+        h1 { color: #ff4444; margin-bottom: 16px }
+        pre { background: #0a0a0a; border: 1px solid #ff4444; border-radius: 8px; padding: 20px; overflow-x: auto; color: #fca5a5 }
+      </style>
+    </head>
+    <body>
+      <h1>JSX Transpile Error</h1>
+      <p>Fix the component code in Node-RED and deploy again.</p>
+      <pre>${esc(error)}</pre>
+    </body>
+    </html>`;
   }
 
   function esc(s) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaqu/fromcubes-portal-react",
-  "version": "0.1.0-alpha.7",
+  "version": "0.1.0-alpha.8",
   "description": "Fromcubes Portal - React for Node-RED with Tailwind CSS and auto complete",
   "keywords": [
     "node-red",
@@ -19,7 +19,6 @@
   "files": [
     "nodes/",
     "examples/",
-    "scripts/",
     "README.md",
     "LICENSE"
   ],
@@ -27,17 +26,17 @@
     "node": ">=18"
   },
   "dependencies": {
-    "esbuild": "0.25.0",
+    "esbuild": "^0.27.4",
     "monaco-editor": "^0.55.1",
-    "tailwindcss": "^4.0.0"
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tailwindcss": "^4.2.1"
   },
   "devDependencies": {
-    "prettier": "^3.8.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "node-red": "next",
+    "prettier": "^3.8.1"
   },
   "scripts": {
-    "build": "node scripts/bundle-react.js",
     "start": "node-red"
   },
   "license": "Apache-2.0",