@aaqu/fromcubes-portal-react 0.1.0-alpha.13 → 0.1.0-alpha.15

package/nodes/lib/helpers.js

@@ -0,0 +1,270 @@
+/**
+ * Shared helper functions for portal-react.
+ */
+
+const crypto = require("crypto");
+const fs = require("fs");
+const path = require("path");
+const esbuild = require("esbuild");
+
+function hash(str) {
+  return crypto.createHash("sha256").update(str).digest("hex").slice(0, 16);
+}
+
+const twCompile = require("tailwindcss").compile;
+const CANDIDATE_RE = /[a-zA-Z0-9_\-:.\/\[\]#%]+/g;
+
+let twCompiled = null;
+async function getTwCompiled() {
+  if (twCompiled) return twCompiled;
+  twCompiled = await twCompile(`@import 'tailwindcss';`, {
+    loadStylesheet: async (id, base) => {
+      let resolved;
+      if (id === "tailwindcss") {
+        resolved = require.resolve("tailwindcss/index.css");
+      } else {
+        resolved = require.resolve(id, { paths: [base || __dirname] });
+      }
+      return {
+        content: fs.readFileSync(resolved, "utf8"),
+        base: path.dirname(resolved),
+      };
+    },
+  });
+  return twCompiled;
+}
+
+async function generateCSS(source) {
+  const cssHash = hash(source);
+  const compiled = await getTwCompiled();
+  const candidates = [...new Set(source.match(CANDIDATE_RE) || [])];
+  const css = compiled.build(candidates);
+  return { css, cssHash };
+}
+
+const FORBIDDEN_KEYS = new Set(["__proto__", "constructor", "prototype"]);
+
+function isSafeName(name) {
+  return (
+    typeof name === "string" && name.length > 0 && !FORBIDDEN_KEYS.has(name)
+  );
+}
+
+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-groups"]) {
+    try {
+      user.groups = JSON.parse(headers["x-portal-user-groups"]);
+    } catch (_) {
+      user.groups = headers["x-portal-user-groups"];
+    }
+  }
+  return Object.keys(user).length > 0 ? user : null;
+}
+
+function removeRoute(router, path) {
+  if (!router || !router.stack) return;
+  router.stack = router.stack.filter(
+    (layer) => !(layer.route && layer.route.path === path),
+  );
+}
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escScript(s) {
+  return String(s).replace(/<\/(script)/gi, "<\\/$1");
+}
+
+module.exports = function (RED) {
+  // 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, "../../../..");
+
+  // Skip npm install for packages already present in node_modules (offline/Docker)
+  RED.hooks.add("preInstall.fcPortal", (event) => {
+    try {
+      const modDir = path.join(event.dir, "node_modules", event.module);
+      if (fs.existsSync(modDir)) {
+        RED.log.info(
+          `[portal-react] ${event.module} already in node_modules, skipping install`,
+        );
+        return false;
+      }
+    } catch (_) {}
+  });
+
+  // ── Disk cache for JS bundles and CSS ────────────────────────
+  const cacheDir = path.join(userDir, "fromcubes", "cache");
+  fs.mkdirSync(cacheDir, { recursive: true });
+
+  function readCachedJS(jsxHash) {
+    try {
+      const js = fs.readFileSync(path.join(cacheDir, jsxHash + ".js"), "utf8");
+      let metafile = null;
+      try {
+        metafile = JSON.parse(
+          fs.readFileSync(path.join(cacheDir, jsxHash + ".meta.json"), "utf8"),
+        );
+      } catch (_) {}
+      return { js, metafile, error: null };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function writeCachedJS(jsxHash, js, metafile) {
+    try {
+      fs.writeFileSync(path.join(cacheDir, jsxHash + ".js"), js, "utf8");
+      if (metafile) {
+        fs.writeFileSync(
+          path.join(cacheDir, jsxHash + ".meta.json"),
+          JSON.stringify(metafile),
+          "utf8",
+        );
+      }
+    } catch (e) {
+      RED.log.warn("[portal-react] cache write failed: " + e.message);
+    }
+  }
+
+  function readCachedCSS(jsxHash) {
+    try {
+      const css = fs.readFileSync(
+        path.join(cacheDir, jsxHash + ".css"),
+        "utf8",
+      );
+      return { css, cssHash: jsxHash };
+    } catch (_) {
+      return null;
+    }
+  }
+
+  function writeCachedCSS(jsxHash, css) {
+    try {
+      fs.writeFileSync(path.join(cacheDir, jsxHash + ".css"), css, "utf8");
+    } catch (e) {
+      RED.log.warn("[portal-react] CSS cache write failed: " + e.message);
+    }
+  }
+
+  function deleteCacheFiles(jsxHash) {
+    if (!jsxHash) return;
+    for (const ext of [".js", ".css", ".meta.json"]) {
+      try {
+        fs.unlinkSync(path.join(cacheDir, jsxHash + ext));
+      } catch (_) {}
+    }
+  }
+
+  function isHashInUse(jsxHash, pageState, excludeEndpoint) {
+    for (const ep in pageState) {
+      if (ep !== excludeEndpoint && pageState[ep]?.jsxHash === jsxHash)
+        return true;
+    }
+    return false;
+  }
+
+  function transpile(jsx) {
+    // Pre-validate with transformSync (fast, no bundling) to avoid esbuild buildSync deadlock on syntax errors
+    try {
+      esbuild.transformSync(jsx, {
+        loader: "jsx",
+        jsx: "transform",
+        jsxFactory: "React.createElement",
+        jsxFragment: "React.Fragment",
+        logLevel: "silent",
+      });
+    } catch (e) {
+      const msg = e.errors?.length
+        ? e.errors
+            .map(
+              (err) =>
+                `${err.text}${err.location ? ` (line ${err.location.line})` : ""}`,
+            )
+            .join("\n")
+        : e.message;
+      return { js: null, error: msg };
+    }
+    // Syntax OK — bundle with full resolution
+    try {
+      const buildResult = esbuild.buildSync({
+        stdin: {
+          contents: jsx,
+          resolveDir: pkgRoot,
+          loader: "jsx",
+        },
+        bundle: true,
+        format: "iife",
+        minify: true,
+        write: false,
+        target: ["es2020"],
+        jsx: "transform",
+        jsxFactory: "React.createElement",
+        jsxFragment: "React.Fragment",
+        define: { "process.env.NODE_ENV": '"production"' },
+        metafile: true,
+        logLevel: "silent",
+        logOverride: { "import-is-undefined": "silent" },
+        nodePaths: [path.join(userDir, "node_modules")],
+        alias: {
+          react: path.dirname(
+            require.resolve("react/package.json", { paths: [pkgRoot] }),
+          ),
+          "react-dom": path.dirname(
+            require.resolve("react-dom/package.json", { paths: [pkgRoot] }),
+          ),
+        },
+      });
+      return {
+        js: buildResult.outputFiles[0].text,
+        metafile: buildResult.metafile,
+        error: null,
+      };
+    } catch (e) {
+      const msg = e.errors?.length
+        ? e.errors
+            .map(
+              (err) =>
+                `${err.text}${err.location ? ` (line ${err.location.line})` : ""}`,
+            )
+            .join("\n")
+        : e.message;
+      return { js: null, error: msg };
+    }
+  }
+
+  return {
+    hash,
+    transpile,
+    generateCSS,
+    extractPortalUser,
+    removeRoute,
+    isSafeName,
+    esc,
+    escScript,
+    pkgRoot,
+    userDir,
+    cacheDir,
+    readCachedJS,
+    writeCachedJS,
+    readCachedCSS,
+    writeCachedCSS,
+    deleteCacheFiles,
+    isHashInUse,
+  };
+};

package/nodes/lib/page-builder.js

@@ -0,0 +1,210 @@
+/**
+ * HTML page builders for portal-react.
+ */
+
+function esc(s) {
+  return String(s)
+    .replace(/&/g, "&")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;");
+}
+
+function escScript(s) {
+  return String(s).replace(/<\/(script)/gi, "<\\/$1");
+}
+
+function buildPage(title, transpiledJs, wsPath, customHead, cssHash, user, showWsStatus, adminRoot) {
+  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>
+      ${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,
+          _portalClient: 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 === 'hello') {
+                  this._portalClient = m.portalClient;
+                }
+                if (m.type === 'version') {
+                  var hasOverlay = document.getElementById('__building_overlay') || document.getElementById('__error_overlay');
+                  if (hasOverlay || (this._version && this._version !== m.hash)) { location.reload(); return; }
+                  this._version = m.hash;
+                }
+                if (m.type === 'building') {
+                  document.getElementById('root').style.display = 'none';
+                  var eo = document.getElementById('__error_overlay');
+                  if (eo) eo.remove();
+                  if (!document.getElementById('__building_overlay')) {
+                    var ov = document.createElement('div');
+                    ov.id = '__building_overlay';
+                    ov.style.cssText = 'position:fixed;inset:0;z-index:99999;background:#111;color:#888;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:monospace';
+                    ov.innerHTML = '<div style="font-size:24px;margin-bottom:16px">Building\\u2026</div>'
+                      + '<div style="width:40px;height:40px;border:3px solid #333;border-top-color:#888;border-radius:50%;animation:__sp .8s linear infinite"></div>'
+                      + '<style>@keyframes __sp{to{transform:rotate(360deg)}}</style>';
+                    document.body.appendChild(ov);
+                  }
+                }
+                if (m.type === 'error') {
+                  document.getElementById('root').style.display = 'none';
+                  var bo = document.getElementById('__building_overlay');
+                  if (bo) bo.remove();
+                  var ov = document.getElementById('__error_overlay');
+                  if (!ov) {
+                    ov = document.createElement('div');
+                    ov.id = '__error_overlay';
+                    ov.style.cssText = 'position:fixed;inset:0;z-index:99999;background:#1a0000;color:#f87171;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:monospace;padding:40px';
+                    document.body.appendChild(ov);
+                  }
+                  ov.innerHTML = '<h1 style="color:#ff4444;margin-bottom:16px;font-size:24px">JSX Transpile Error</h1>'
+                    + '<p style="color:#888;margin-bottom:16px">Fix the component code in Node-RED and deploy again.</p>'
+                    + '<pre style="background:#0a0a0a;border:1px solid #ff4444;border-radius:8px;padding:20px;overflow-x:auto;color:#fca5a5;max-width:90vw;max-height:60vh;overflow:auto;white-space:pre-wrap">'
+                    + m.message.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;')
+                    + '</pre>'
+                    + '<p style="color:#4ade80;font-size:12px;margin-top:24px">Connected \\u2014 will reload on redeploy</p>';
+                }
+                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>
+        try { ${escScript(transpiledJs)}
+        } catch(__e) {
+          var __r = document.getElementById('root');
+          __r.style.cssText = 'font-family:monospace;background:#1a0000;color:#f87171;padding:40px;min-height:100vh;margin:0';
+          __r.innerHTML = '<h1 style="color:#ff4444;margin-bottom:16px">Runtime Error</h1>'
+            + '<p style="color:#888">Fix the component code in Node-RED and deploy again.</p>'
+            + '<pre style="background:#0a0a0a;border:1px solid #ff4444;border-radius:8px;padding:20px;overflow-x:auto;color:#fca5a5;white-space:pre-wrap">'
+            + (__e.message || __e).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;') + '</pre>';
+        }
+      <\/script>
+    </body>
+    </html>`;
+}
+
+function buildErrorPage(title, error, wsPath) {
+  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 }
+        .status { color: #888; font-size: 12px; margin-top: 24px }
+        .status.ok { color: #4ade80 }
+      </style>
+    </head>
+    <body>
+      <h1>JSX Transpile Error</h1>
+      <p>Fix the component code in Node-RED and deploy again.</p>
+      <pre>${esc(error)}</pre>
+      <p class="status" id="st">Waiting for redeploy…</p>
+      <script>
+        (function() {
+          var st = document.getElementById('st');
+          var retries = 0;
+          function connect() {
+            var p = location.protocol === 'https:' ? 'wss:' : 'ws:';
+            var ws = new WebSocket(p + '//' + location.host + '${wsPath}');
+            ws.onopen = function() {
+              retries = 0;
+              if (st) { st.textContent = 'Connected \\u2014 will reload on redeploy'; st.className = 'status ok'; }
+            };
+            ws.onmessage = function(e) {
+              try {
+                var m = JSON.parse(e.data);
+                if (m.type === 'version' && m.hash) location.reload();
+                if (m.type === 'error') { var pre = document.querySelector('pre'); if (pre) pre.textContent = m.message; }
+              } catch(_) {}
+            };
+            ws.onclose = function() {
+              if (st) { st.textContent = 'Disconnected \\u2014 reconnecting\\u2026'; st.className = 'status'; }
+              var delay = Math.min(500 * Math.pow(2, retries), 8000);
+              retries++;
+              setTimeout(connect, delay);
+            };
+            ws.onerror = function() { ws.close(); };
+          }
+          ${wsPath ? "connect();" : ""}
+          setInterval(function() {
+            fetch(location.href, { method: 'HEAD', cache: 'no-store' })
+              .then(function(r) { if (r.ok) location.reload(); })
+              .catch(function() {});
+          }, 3000);
+        })();
+      <\/script>
+    </body>
+    </html>`;
+}
+
+module.exports = { buildPage, buildErrorPage };

package/nodes/portal-react.html

@@ -567,26 +567,6 @@
     <label for="node-input-compName"><i class="fa fa-cube"></i> JSX Tag</label>
     <input type="text" id="node-input-compName" placeholder="MyComponent" />
   </div>
-  <div class="form-row" style="display:flex;gap:8px;">
-    <div style="flex:1">
-      <label><i class="fa fa-sign-in"></i> Input fields</label>
-      <input
-        type="text"
-        id="node-input-compInputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-    <div style="flex:1">
-      <label><i class="fa fa-sign-out"></i> Output fields</label>
-      <input
-        type="text"
-        id="node-input-compOutputs"
-        placeholder="payload,topic"
-        style="width:100%"
-      />
-    </div>
-  </div>
   <div class="form-row" style="margin-bottom:4px;">
     <label><i class="fa fa-code"></i> JSX Code</label>
   </div>
@@ -629,8 +609,6 @@
         name: { value: "" },
         compName: { value: "StatusCard", required: true },
         compCode: { value: COMP_STARTER },
-        compInputs: { value: "label,value,unit" },
-        compOutputs: { value: "" },
       },
       inputs: 0,
       outputs: 0,
@@ -1176,12 +1154,6 @@
                     return '<code style="background:rgba(128,128,128,.15);padding:0 4px;border-radius:2px;margin-right:3px;">' + p + '</code>';
                   }).join("") + '</div>');
               }
-              var io = [];
-              if ((c.inputs || []).length) io.push("in: " + c.inputs.join(", "));
-              if ((c.outputs || []).length) io.push("out: " + c.outputs.join(", "));
-              if (io.length) {
-                detailParts.push('<div style="font-size:10px;opacity:.4;margin-top:2px;">' + io.join(" &bull; ") + '</div>');
-              }
               var hasDetail = detailParts.length > 0;
 
               html +=
@@ -1479,12 +1451,12 @@ const { data, send, user, portalClient } = useNodeRed();
   var fileList = $('<div style="padding:0;"></div>').appendTo(content);
 
   // ── Toolbar ──
-  var toolbar = $('<div style="display:flex;align-items:center;gap:4px;"></div>');
+  var toolbar = $('<div style="display:flex;align-items:center;gap:6px;margin:0 6px;padding:2px 0 0;"></div>');
   var fileInput = $('<input type="file" multiple style="display:none;">').appendTo(toolbar);
-  $('<a class="red-ui-sidebar-header-button" href="#"><i class="fa fa-upload"></i> Upload</a>')
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-upload"></i> Upload</button>')
     .on("click", function (e) { e.preventDefault(); fileInput.trigger("click"); })
     .appendTo(toolbar);
-  $('<a class="red-ui-sidebar-header-button" href="#"><i class="fa fa-folder-open"></i> New folder</a>')
+  $('<button class="red-ui-button red-ui-button-small" style="flex-shrink:0;"><i class="fa fa-folder-open"></i> New folder</button>')
     .on("click", function (e) { e.preventDefault(); showNewFolderInput(""); })
     .appendTo(toolbar);
 
@@ -1758,14 +1730,31 @@ const { data, send, user, portalClient } = useNodeRed();
     return root;
   }
 
+  var ROOT_KEY = "__root__";
+
   function renderTree() {
     fileList.empty();
+    var isOpen = !collapsed[ROOT_KEY];
+
+    // Root folder row — always visible
+    var rootRow = $('<div style="display:flex;align-items:center;gap:5px;padding:4px 8px;border-bottom:1px solid var(--red-ui-secondary-border-color);"></div>');
+    var rootArrow = $('<i class="fa ' + (isOpen ? 'fa-caret-down' : 'fa-caret-right') + '" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:10px;text-align:center;cursor:pointer;"></i>');
+    rootArrow.on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); });
+    rootRow.append(rootArrow);
+    $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(rootRow);
+    $('<span style="flex:1;font-size:12px;cursor:pointer;opacity:0.8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;"></span>').text(publicBase.replace(/\/$/, ""))
+      .on("click", function () { collapsed[ROOT_KEY] = isOpen; renderTree(); })
+      .appendTo(rootRow);
+    fileList.append(rootRow);
+
+    if (!isOpen) return;
+
     if (allEntries.length === 0) {
       fileList.append($('<div style="padding:16px;color:var(--red-ui-secondary-text-color);text-align:center;">No files uploaded.<br><span style="font-size:11px;">Drop files here or click Upload.</span></div>'));
       return;
     }
     var tree = buildTree(allEntries);
-    renderNode(tree, "", 0);
+    renderNode(tree, "", 1);
   }
 
   function renderNode(node, parentPath, depth) {
@@ -1800,7 +1789,7 @@ const { data, send, user, portalClient } = useNodeRed();
         });
         row.append(arrow);
         $('<i class="fa ' + (isOpen ? 'fa-folder-open' : 'fa-folder') + '" style="color:#fbbf24;font-size:12px;width:16px;text-align:center;"></i>').appendTo(row);
-        $('<span style="flex:1;font-size:12px;cursor:pointer;"></span>').text(name)
+        $('<span style="flex:1;font-size:12px;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name)
           .on("click", function () { collapsed[fullPath] = isOpen; renderTree(); })
           .appendTo(row);
 
@@ -1862,7 +1851,7 @@ const { data, send, user, portalClient } = useNodeRed();
         row.attr("draggable", "true").css("cursor", "grab");
         $('<span style="width:10px;"></span>').appendTo(row); // spacer for arrow alignment
         $('<i class="fa fa-file-o" style="color:var(--red-ui-secondary-text-color);font-size:11px;width:16px;text-align:center;"></i>').appendTo(row);
-        $('<span style="flex:1;font-size:12px;word-break:break-all;"></span>').text(name).appendTo(row);
+        $('<span style="flex:1;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;" title="' + fullPath + '"></span>').text(name).appendTo(row);
         $('<span style="font-size:10px;color:var(--red-ui-tertiary-text-color);white-space:nowrap;"></span>').text(formatSize(e.size)).appendTo(row);
 
         row.on("dragstart", function (ev) {