@aaqu/fromcubes-portal-react 0.1.0-alpha.27 → 0.1.0-alpha.29

package/nodes/lib/helpers.js

@@ -319,6 +319,32 @@ const REACT_BUILTIN_TAGS = new Set([
 const PASCAL_TAG_RE = /<\s*([A-Z][A-Za-z0-9_]*)/g;
 const RE_ESCAPE = /[.*+?^${}()|[\]\\]/g;
 
+// Cached identifier-boundary regexes shared by every "does this code
+// reference identifier X" scan (component deps, utility selection, dirty-
+// portal matching, topological sort). `\b` breaks for names that start or
+// end with `$` — a legal identifier char that is not a regex word char — so
+// lookarounds on the [\w$] class are used instead. Cache is bounded: cleared
+// wholesale past 5000 entries (long-running process with many renames).
+const IDENT_RE_CACHE = new Map();
+
+/**
+ * Return a cached RegExp matching `name` as a standalone JS identifier
+ * (not as a prefix/suffix/substring of a longer identifier).
+ *
+ * @param {string} name  Identifier to match (component/utility/symbol name).
+ * @returns {RegExp}
+ */
+function identifierRe(name) {
+  let re = IDENT_RE_CACHE.get(name);
+  if (!re) {
+    if (IDENT_RE_CACHE.size > 5000) IDENT_RE_CACHE.clear();
+    const escaped = name.replace(RE_ESCAPE, "\\$&");
+    re = new RegExp(`(?<![\\w$])${escaped}(?![\\w$])`);
+    IDENT_RE_CACHE.set(name, re);
+  }
+  return re;
+}
+
 /**
  * Find PascalCase JSX tags in `userCode` that have no visible definition.
  *
@@ -401,6 +427,44 @@ function hasFreshBuild(state) {
   return !!state && !state.building && !!state.compiled && !state.compiled.error;
 }
 
+/**
+ * Decide whether the `preInstall` hook may veto an npm install because the
+ * module is already on disk. Vetoing is ONLY safe for plain installs of an
+ * already-present package (the offline/Docker case). It must never swallow:
+ *
+ *   - **upgrades** (`event.isUpgrade`) — the palette manager's "update"
+ *     button routes through the same install path; vetoing it makes Node-RED
+ *     mark the module `pendingUpdated` and demand a restart while the old
+ *     files stay on disk — the update silently never lands,
+ *   - **explicit version requests** that differ from the installed version
+ *     (e.g. a `libs` entry bumped from `^4.4.0`) — npm itself no-ops when
+ *     the range is already satisfied, so letting it run is the safe side.
+ *
+ * An unreadable/corrupt package.json also proceeds with the install (npm
+ * repairs what we cannot verify).
+ *
+ * @param {{dir: string, module: string, version?: string, isUpgrade?: boolean}} event
+ *        `preInstall` hook payload from `@node-red/registry`.
+ * @returns {boolean}  true → hook should return false (skip npm install).
+ */
+function shouldSkipInstall(event) {
+  if (event.isUpgrade) return false;
+  const modDir = path.join(event.dir, "node_modules", event.module);
+  if (!fs.existsSync(modDir)) return false;
+  if (event.version) {
+    let installed;
+    try {
+      installed = JSON.parse(
+        fs.readFileSync(path.join(modDir, "package.json"), "utf8"),
+      ).version;
+    } catch (_) {
+      return false;
+    }
+    if (installed !== event.version) return false;
+  }
+  return true;
+}
+
 module.exports = function (RED) {
   return createHelpers(RED);
 };
@@ -411,8 +475,10 @@ module.exports.quickCheckSyntax = quickCheckSyntax;
 module.exports.formatEsbuildError = formatEsbuildError;
 module.exports.extractPortalUser = extractPortalUser;
 module.exports.findMissingComponentRefs = findMissingComponentRefs;
+module.exports.identifierRe = identifierRe;
 module.exports.serveableHash = serveableHash;
 module.exports.hasFreshBuild = hasFreshBuild;
+module.exports.shouldSkipInstall = shouldSkipInstall;
 module.exports.NAME_MAX_LEN = NAME_MAX_LEN;
 module.exports.MAX_GROUPS_HEADER_BYTES = MAX_GROUPS_HEADER_BYTES;
 
@@ -434,20 +500,22 @@ function createHelpers(RED) {
    * `preInstall` hook (Node-RED 1.3+) — vetoes an npm install when the
    * package is already on disk. Useful for offline/Docker setups where
    * Node-RED's auto-install pass would otherwise try to hit the registry
-   * and fail. Hook itself is *optional by design*: any unexpected error
+   * and fail. Upgrades and mismatched explicit versions are never vetoed
+   * (see {@link shouldSkipInstall}) — vetoing an upgrade leaves the old
+   * files on disk while Node-RED demands a restart, so the update never
+   * installs. Hook itself is *optional by design*: any unexpected error
    * inside the body MUST NOT bubble up (it would cancel an install path
    * the user actually expected to run). We log at `trace` level so the
    * developer can opt into diagnostics via `logging.level = trace` in
    * `settings.js`, without spamming default-level logs.
    *
-   * @param {{dir: string, module: string}} event
+   * @param {{dir: string, module: string, version?: string, isUpgrade?: boolean}} event
    * @returns {boolean|void}  `false` skips the install; anything else proceeds.
    * @listens RED.hooks#preInstall.portalReact
    */
   RED.hooks.add("preInstall.portalReact", (event) => {
     try {
-      const modDir = path.join(event.dir, "node_modules", event.module);
-      if (fs.existsSync(modDir)) {
+      if (shouldSkipInstall(event)) {
         RED.log.info(
           `[portal-react] ${event.module} already in node_modules, skipping install`,
         );
@@ -575,21 +643,24 @@ function createHelpers(RED) {
 
   /**
    * Bundle the user JSX (with utility/library/import code already concatenated)
-   * into a minified IIFE. Pre-validates with `quickCheckSyntax` first to avoid
-   * esbuild `buildSync` deadlocks on malformed input. The `react`/`react-dom`
-   * alias points at this package's own copies so peer-dep packages share a
-   * single React instance.
+   * into a minified IIFE. Pre-validates with `quickCheckSyntax` first so
+   * malformed input never reaches the bundler. Uses the async `esbuild.build`
+   * API — a large bundle (three.js et al.) runs in esbuild's service process
+   * without blocking the Node-RED event loop. The `react`/`react-dom` alias
+   * points at this package's own copies so peer-dep packages share a single
+   * React instance.
    *
    * @param {string} jsx
-   * @returns {TranspileResult}
+   * @returns {Promise<TranspileResult>}
    */
-  function transpile(jsx) {
-    // Pre-validate with transformSync (fast, no bundling) to avoid esbuild buildSync deadlock on syntax errors
+  async function transpile(jsx) {
+    // Pre-validate with transformSync (fast, no bundling) so syntax errors get
+    // clean line-numbered diagnostics before any resolution work
     const syntaxErr = quickCheckSyntax(jsx);
     if (syntaxErr) return { js: null, error: syntaxErr };
     // Syntax OK — bundle with full resolution
     try {
-      const buildResult = esbuild.buildSync({
+      const buildResult = await esbuild.build({
         stdin: {
           contents: jsx,
           resolveDir: pkgRoot,
@@ -639,6 +710,7 @@ function createHelpers(RED) {
     isSafeName,
     validateSubPath,
     findMissingComponentRefs,
+    identifierRe,
     pkgRoot,
     userDir,
     cacheDir,

package/nodes/lib/portal-page-route.js

@@ -40,6 +40,7 @@ function createPortalPageHandler(opts) {
   } = opts;
 
   return async function portalPageHandler(req, res) {
+    let cssTimer = null;
     try {
       const state = pageState[endpoint];
       if (!state || state.building || !state.compiled) {
@@ -88,13 +89,16 @@ function createPortalPageHandler(opts) {
 
       const { cssHash } = await Promise.race([
         state.cssReady,
-        new Promise((_, reject) =>
-          setTimeout(
+        new Promise((_, reject) => {
+          cssTimer = setTimeout(
             () => reject(new Error("CSS generation timeout")),
             15000,
-          ),
-        ),
+          );
+        }),
       ]);
+      // Clear the losing timer — without this every request leaves a 15 s
+      // timer pending after the CSS promise wins the race.
+      clearTimeout(cssTimer);
       const user = state.portalAuth ? extractPortalUser(req.headers) : null;
       res
         .type("text/html")
@@ -111,6 +115,7 @@ function createPortalPageHandler(opts) {
           ),
         );
     } catch (e) {
+      clearTimeout(cssTimer);
       res
         .status(500)
         .type("text/html")

package/nodes/lib/registry-nodes.js

@@ -1,23 +1,74 @@
 const MAX_UTIL_CODE_BYTES = 1_000_000;
 
+const DECL_RE = /^(?:export\s+)?(?:async\s+)?(function\s*\*?|const|let|var|class)\s+([A-Za-z_$][\w$]*)/gm;
+
 /**
  * Scan utility code for top-level `function`/`const`/`let`/`var`/`class`
  * names. Used for selective inclusion, symbol collision checks, and the
  * editor Utilities dialog. Oversize input is ignored so the regex cannot be
  * weaponized with multi-MB code.
  *
+ * Multi-declarator statements (`const a = 1, b = 2`) yield every name —
+ * initializer-internal commas are skipped via bracket/quote depth tracking.
+ * Destructuring declarations are not supported (never were).
+ *
  * @param {string} code
  * @returns {Set<string>}
  */
 function extractUtilitySymbols(code) {
   const names = new Set();
   if (!code || code.length > MAX_UTIL_CODE_BYTES) return names;
-  const re = /^(?:export\s+)?(?:async\s+)?(?:function\s*\*?|const|let|var|class)\s+([A-Za-z_$][\w$]*)/gm;
+  DECL_RE.lastIndex = 0;
   let m;
-  while ((m = re.exec(code))) names.add(m[1]);
+  while ((m = DECL_RE.exec(code))) {
+    names.add(m[2]);
+    const kind = m[1];
+    if (kind === "const" || kind === "let" || kind === "var") {
+      collectExtraDeclarators(code, DECL_RE.lastIndex, names);
+    }
+  }
   return names;
 }
 
+/**
+ * Walk a `const`/`let`/`var` statement from just past its first declared
+ * name and collect the names of any further comma-separated declarators.
+ * Commas inside `()`, `[]`, `{}` or string/template literals belong to the
+ * initializer expression and are ignored. Scanning stops at the first `;`
+ * (or unbalanced closer) at depth 0.
+ *
+ * @param {string} code
+ * @param {number} from   Index right after the first declarator name.
+ * @param {Set<string>} names  Collector — extra names are added in place.
+ * @returns {void}
+ */
+function collectExtraDeclarators(code, from, names) {
+  let depth = 0;
+  let i = from;
+  const n = code.length;
+  while (i < n) {
+    const ch = code[i];
+    if (ch === '"' || ch === "'" || ch === "`") {
+      i++;
+      while (i < n && code[i] !== ch) {
+        if (code[i] === "\\") i++;
+        i++;
+      }
+    } else if (ch === "(" || ch === "[" || ch === "{") {
+      depth++;
+    } else if (ch === ")" || ch === "]" || ch === "}") {
+      if (depth === 0) return; // end of enclosing block / malformed
+      depth--;
+    } else if (ch === ";" && depth === 0) {
+      return;
+    } else if (ch === "," && depth === 0) {
+      const dm = code.slice(i + 1).match(/^\s*([A-Za-z_$][\w$]*)/);
+      if (dm) names.add(dm[1]);
+    }
+    i++;
+  }
+}
+
 /**
  * Register fc-portal-component and fc-portal-utility config nodes.
  *
@@ -37,6 +88,15 @@ function registerRegistryNodes(RED, deps) {
     scheduleRebuildUsing,
   } = deps;
 
+  // Name each component/utility node currently registers: { nodeId: name }.
+  // Registry entries survive a plain redeploy (close(removed=false) keeps
+  // them so an unchanged deploy stays a no-op) — this map is what lets a
+  // RENAME on redeploy free the old entry instead of leaking it.
+  if (!RED.settings.portalReactNodeNames) {
+    RED.settings.portalReactNodeNames = {};
+  }
+  const nodeNames = RED.settings.portalReactNodeNames;
+
   function PortalComponentNode(config) {
     RED.nodes.createNode(this, config);
     const node = this;
@@ -48,6 +108,19 @@ function registerRegistryNodes(RED, deps) {
       return;
     }
 
+    // Renamed on redeploy → free the previous entry owned by this node.
+    const prevOwnedComp = nodeNames[node.id];
+    if (prevOwnedComp && prevOwnedComp !== compName) {
+      if (compNameOwners[prevOwnedComp] === node.id) {
+        delete compNameOwners[prevOwnedComp];
+      }
+      if (registry[prevOwnedComp]) {
+        delete registry[prevOwnedComp];
+        scheduleRebuildUsing(prevOwnedComp);
+      }
+      delete nodeNames[node.id];
+    }
+
     const existingOwner = compNameOwners[compName];
     if (existingOwner && existingOwner !== node.id) {
       node.error(
@@ -80,6 +153,7 @@ function registerRegistryNodes(RED, deps) {
       return;
     }
     compNameOwners[compName] = node.id;
+    nodeNames[node.id] = compName;
 
     const newCode = config.compCode || "";
     const prevCode = registry[compName]?.code;
@@ -100,12 +174,21 @@ function registerRegistryNodes(RED, deps) {
 
     if (prevCode !== newCode) scheduleRebuildUsing(compName);
 
-    node.on("close", function (_removed, done) {
-      if (compNameOwners[compName] === node.id) {
-        delete compNameOwners[compName];
+    node.on("close", function (removed, done) {
+      // Plain redeploy (removed=false): keep the registry entry. The new
+      // instance re-registers in the same deploy pass and can compare
+      // prevCode — an unchanged component deploy stays a true no-op.
+      // Only delete/disable (removed=true) drops the entry.
+      if (removed) {
+        if (compNameOwners[compName] === node.id) {
+          delete compNameOwners[compName];
+        }
+        if (nodeNames[node.id] === compName) {
+          delete nodeNames[node.id];
+        }
+        delete registry[compName];
+        scheduleRebuildUsing(compName);
       }
-      delete registry[compName];
-      scheduleRebuildUsing(compName);
       done();
     });
   }
@@ -122,6 +205,24 @@ function registerRegistryNodes(RED, deps) {
       return;
     }
 
+    // Renamed on redeploy → free the previous entry + its symbol ownership.
+    const prevOwnedUtil = nodeNames[node.id];
+    if (prevOwnedUtil && prevOwnedUtil !== utilName) {
+      if (compNameOwners[prevOwnedUtil] === node.id) {
+        delete compNameOwners[prevOwnedUtil];
+      }
+      const oldSyms = extractUtilitySymbols(utilities[prevOwnedUtil]?.code || "");
+      for (const s of oldSyms) {
+        if (utilSymbolOwners[s] === prevOwnedUtil) delete utilSymbolOwners[s];
+      }
+      if (utilities[prevOwnedUtil]) {
+        delete utilities[prevOwnedUtil];
+        scheduleRebuildUsing(prevOwnedUtil);
+        for (const s of oldSyms) scheduleRebuildUsing(s);
+      }
+      delete nodeNames[node.id];
+    }
+
     const existingOwner = compNameOwners[utilName];
     if (existingOwner && existingOwner !== node.id) {
       node.error(
@@ -138,6 +239,7 @@ function registerRegistryNodes(RED, deps) {
       return;
     }
     compNameOwners[utilName] = node.id;
+    nodeNames[node.id] = utilName;
 
     const newCode = config.utilCode || "";
     const prevCode = utilities[utilName]?.code;
@@ -202,17 +304,24 @@ function registerRegistryNodes(RED, deps) {
       for (const s of prevSyms) if (!newSyms.has(s)) scheduleRebuildUsing(s);
     }
 
-    node.on("close", function (_removed, done) {
-      if (compNameOwners[utilName] === node.id) {
-        delete compNameOwners[utilName];
-      }
-      for (const s of Object.keys(utilSymbolOwners)) {
-        if (utilSymbolOwners[s] === utilName) delete utilSymbolOwners[s];
+    node.on("close", function (removed, done) {
+      // Plain redeploy (removed=false): keep the utility entry + symbol
+      // ownership so an unchanged deploy stays a no-op (see component close).
+      if (removed) {
+        if (compNameOwners[utilName] === node.id) {
+          delete compNameOwners[utilName];
+        }
+        if (nodeNames[node.id] === utilName) {
+          delete nodeNames[node.id];
+        }
+        for (const s of Object.keys(utilSymbolOwners)) {
+          if (utilSymbolOwners[s] === utilName) delete utilSymbolOwners[s];
+        }
+        const removedSyms = extractUtilitySymbols(utilities[utilName]?.code || "");
+        delete utilities[utilName];
+        scheduleRebuildUsing(utilName);
+        for (const s of removedSyms) scheduleRebuildUsing(s);
       }
-      const removedSyms = extractUtilitySymbols(utilities[utilName]?.code || "");
-      delete utilities[utilName];
-      scheduleRebuildUsing(utilName);
-      for (const s of removedSyms) scheduleRebuildUsing(s);
       done();
     });
   }

package/nodes/portal-react.js

@@ -290,6 +290,16 @@ module.exports = function (RED) {
   }
   const endpointOwners = RED.settings.portalReactEndpointOwners;
 
+  // Track the endpoint each portal node currently serves: { nodeId: endpoint }.
+  // A sub-path change arrives as a plain redeploy (close(removed=false)), which
+  // intentionally keeps routes and pageState alive — without this map the old
+  // URL would keep serving the holding page forever. The constructor compares
+  // against this map and tears down the previous endpoint on mismatch.
+  if (!RED.settings.portalReactNodeEndpoints) {
+    RED.settings.portalReactNodeEndpoints = {};
+  }
+  const nodeEndpoints = RED.settings.portalReactNodeEndpoints;
+
   // Track component name ownership: { compName: nodeId } — prevents duplicate component names
   // Shared namespace with fc-portal-utility nodes so a component and a utility
   // can never share the same name.
@@ -440,7 +450,9 @@ module.exports = function (RED) {
           if (
             (usedComps && usedComps.has(name)) ||
             (usedUtils && usedUtils.has(name)) ||
-            raw.includes(name)
+            // Identifier-boundary match, not substring — a dirty `Button`
+            // must not rebuild portals that only use `ButtonGroup`.
+            identifierRe(name).test(raw)
           ) {
             targetIds.add(nodeId);
             break;
@@ -452,14 +464,15 @@ module.exports = function (RED) {
     const fns = [...targetIds].map((id) => rebuildCallbacks[id]).filter(Boolean);
     let i = 0;
     /**
-     * Trampoline over the rebuild list — yields to the event loop between
+     * Trampoline over the rebuild list — awaits each (async) rebuild so
+     * builds run sequentially, and yields to the event loop between
      * iterations so a heavy queue does not block the HTTP server.
-     * @returns {void}
+     * @returns {Promise<void>}
      * @private
      */
-    function next() {
+    async function next() {
       if (i >= fns.length) return;
-      try { fns[i](); } catch (e) { RED.log.error("[portal-react] rebuild failed: " + e.message); }
+      try { await fns[i](); } catch (e) { RED.log.error("[portal-react] rebuild failed: " + e.message); }
       i++;
       if (i < fns.length) setImmediate(next);
     }
@@ -480,6 +493,7 @@ module.exports = function (RED) {
     isSafeName,
     validateSubPath,
     findMissingComponentRefs,
+    identifierRe,
     userDir,
     readCachedJS,
     writeCachedJS,
@@ -597,6 +611,25 @@ module.exports = function (RED) {
     }
     endpointOwners[endpoint] = nodeId;
 
+    // ── Sub-path changed on redeploy → tear down the previous endpoint ──
+    // Route, pageState, cache and recovery entries of the old URL must go,
+    // or it keeps serving the "Building…" holding page until restart.
+    const prevEndpoint = nodeEndpoints[nodeId];
+    if (prevEndpoint && prevEndpoint !== endpoint) {
+      const oldSt = pageState[prevEndpoint];
+      if (oldSt?.jsxHash && !isHashInUse(oldSt.jsxHash, pageState, prevEndpoint)) {
+        deleteCacheFiles(oldSt.jsxHash);
+      }
+      delete pageState[prevEndpoint];
+      removeRoute(RED.httpNode._router, prevEndpoint);
+      delete registeredRoutes[prevEndpoint];
+      if (endpointOwners[prevEndpoint] === nodeId) {
+        delete endpointOwners[prevEndpoint];
+      }
+      lastBroadcastCache.delete(prevEndpoint);
+    }
+    nodeEndpoints[nodeId] = endpoint;
+
     // State
     const clients = new Map(); // portalClient → ws
     const userIndex = new Map(); // userId → Set<ws>   (O(1) user-cast)
@@ -699,11 +732,11 @@ module.exports = function (RED) {
      * Errors set `pageState[endpoint].compiled.error` and the route handler
      * serves an error page (or the previous lastGood build with a banner).
      *
-     * @returns {void}
+     * @returns {Promise<void>}
      * @throws never — internal exceptions are caught and stored in pageState.
      * @private
      */
-    function rebuild() {
+    async function rebuild() {
       try {
         // ── Pre-build: clear cache, set building state, notify browsers ──
         const prevState = pageState[endpoint];
@@ -721,27 +754,11 @@ module.exports = function (RED) {
         const allEntries = Object.entries(registry);
         const needed = new Set();
 
-        // Word-boundary identifier match. Avoids prefix collisions (e.g. a
-        // `Button` rebuild marking `ButtonGroup` users as needing rebuild)
-        // and matches identifiers, not substrings inside other words.
-        // Regexes are cached per name so we don't pay the constructor cost
-        // on every recursion of addWithDeps.
-        const escapeRe = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
-        const nameReCache = new Map();
-        const refRe = (n) => {
-          let r = nameReCache.get(n);
-          if (!r) {
-            r = new RegExp(`\\b${escapeRe(n)}\\b`);
-            nameReCache.set(n, r);
-          }
-          return r;
-        };
-
         /**
          * Depth-first walk that pulls a component and every transitively
-         * referenced sibling into `needed`. Matching uses `\b<name>\b`
-         * (cached) so a component named `Button` does not pull in
-         * `ButtonGroup`.
+         * referenced sibling into `needed`. Matching uses `identifierRe`
+         * (cached, identifier-boundary) so a component named `Button` does
+         * not pull in `ButtonGroup`.
          * @param {string} name
          * @returns {void}
          * @private
@@ -752,14 +769,14 @@ module.exports = function (RED) {
           if (!entry) return;
           needed.add(name);
           for (const [other] of allEntries) {
-            if (other !== name && refRe(other).test(entry.code)) {
+            if (other !== name && identifierRe(other).test(entry.code)) {
               addWithDeps(other);
             }
           }
         }
 
         for (const [name] of allEntries) {
-          if (refRe(name).test(componentCode)) {
+          if (identifierRe(name).test(componentCode)) {
             addWithDeps(name);
           }
         }
@@ -780,10 +797,11 @@ module.exports = function (RED) {
         const includedLibraryCode = [...needed]
           .map((n) => registry[n]?.code || "")
           .join("\n");
+        // identifierRe escapes regex metacharacters and handles `$`-edged
+        // names — symbols come from user code, so both matter here.
         const referencesAnySymbol = (text, syms) => {
           for (const s of syms) {
-            const re = new RegExp(`\\b${s}\\b`);
-            if (re.test(text)) return true;
+            if (identifierRe(s).test(text)) return true;
           }
           return false;
         };
@@ -815,19 +833,44 @@ module.exports = function (RED) {
         }
         portalNeededUtilities[nodeId] = new Set(neededUtils);
 
-        // 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 (bUsesA && !aUsesB) return -1; // b depends on a → a first
-          return 0;
-        });
-        const libraryJsx = entries
+        // Topological sort of needed components (Kahn). Edge b→a when a's
+        // code references b, i.e. b must be emitted first. A pairwise
+        // Array.sort comparator is NOT transitive over dependency chains
+        // (A→B→C without a direct A→C reference), so a real topo sort is
+        // required. Cycles (mutual references) fall back to registry
+        // insertion order for the remainder.
+        const neededNames = allEntries
+          .filter(([n]) => needed.has(n))
+          .map(([n]) => n);
+        const indegree = new Map(neededNames.map((n) => [n, 0]));
+        const dependents = new Map(neededNames.map((n) => [n, []]));
+        for (const a of neededNames) {
+          const codeA = registry[a].code;
+          for (const b of neededNames) {
+            if (a !== b && identifierRe(b).test(codeA)) {
+              dependents.get(b).push(a);
+              indegree.set(a, indegree.get(a) + 1);
+            }
+          }
+        }
+        const topoQueue = neededNames.filter((n) => indegree.get(n) === 0);
+        const ordered = [];
+        while (topoQueue.length > 0) {
+          const n = topoQueue.shift();
+          ordered.push(n);
+          for (const d of dependents.get(n)) {
+            indegree.set(d, indegree.get(d) - 1);
+            if (indegree.get(d) === 0) topoQueue.push(d);
+          }
+        }
+        if (ordered.length < neededNames.length) {
+          const emitted = new Set(ordered);
+          for (const n of neededNames) if (!emitted.has(n)) ordered.push(n);
+        }
+        const libraryJsx = ordered
           .map(
-            ([name, c]) =>
-              `// Library: ${name}\nconst ${name} = (() => {\n${c.code}\nreturn ${name};\n})();`,
+            (name) =>
+              `// Library: ${name}\nconst ${name} = (() => {\n${registry[name].code}\nreturn ${name};\n})();`,
           )
           .join("\n\n");
 
@@ -1041,7 +1084,12 @@ module.exports = function (RED) {
           compiled = readCachedJS(jsxHash);
           cacheHit = !!compiled;
           if (!compiled) {
-            compiled = transpile(fullJsx);
+            compiled = await transpile(fullJsx);
+            // The await opens a window where close() may have torn this node
+            // down (redeploy/removal). Writing pageState now would resurrect
+            // state for a dead node — bail out; the successor node's own
+            // rebuild owns the endpoint from here.
+            if (isClosing) return;
             if (!compiled.error) {
               writeCachedJS(jsxHash, compiled.js, compiled.metafile);
             }
@@ -1102,9 +1150,13 @@ module.exports = function (RED) {
                   cssHash: prevState.cssHash,
                 });
               }
-              return generateCSS(fullJsx).then(({ css, cssHash }) => {
+              // cssHash is always jsxHash — generateCSS hashes raw fullJsx
+              // (no schema-version prefix), which would give the same CSS a
+              // different URL on cache-hit vs cache-miss builds and force a
+              // pointless browser refetch after redeploy.
+              return generateCSS(fullJsx).then(({ css }) => {
                 writeCachedCSS(jsxHash, css);
-                return { css, cssHash };
+                return { css, cssHash: jsxHash };
               });
             })().catch((err) => {
               // CSS generation failed (Tailwind compile error, missing
@@ -1123,10 +1175,19 @@ module.exports = function (RED) {
         lastJsxHash = jsxHash;
 
         // Preserve last successful build so that on transpile errors we keep
-        // serving the previous working JS instead of throwing clients to an error page.
+        // serving the previous working JS instead of throwing clients to an
+        // error page. On success, snapshot IMMEDIATELY (not after cssReady
+        // resolves) — a rebuild failing inside that async window must still
+        // find a fallback. cssHash is patched in when cssReady settles.
         const lastGood = compiled.error
           ? prevState?.lastGood || null
-          : null; // will be populated after cssReady resolves on success
+          : {
+              compiledJs: compiled.js,
+              contentHash,
+              cssHash: "",
+              pageTitle,
+              customHead,
+            };
 
         pageState[endpoint] = {
           compiled,
@@ -1495,7 +1556,9 @@ module.exports = function (RED) {
             }
             lastBroadcastCache.set(endpoint, cached);
           }
-          updateStatus();
+          // No updateStatus() here — client count only changes on WS
+          // connect/disconnect, and emitting a status event per routed msg
+          // floods the editor comms channel on high-rate streams.
           done();
         } catch (err) {
           // Catch-node propagation: done(err) lets the runtime route the
@@ -1581,6 +1644,7 @@ module.exports = function (RED) {
           if (removed) {
             lastBroadcastCache.delete(endpoint);
             delete portalSig[nodeId];
+            delete nodeEndpoints[nodeId];
           }
 
           // Clear the userIndex — WS clients are already closed above, but

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaqu/fromcubes-portal-react",
-  "version": "0.1.0-alpha.27",
+  "version": "0.1.0-alpha.29",
   "description": "Fromcubes Portal - React for Node-RED with Tailwind CSS and auto complete",
   "type": "commonjs",
   "keywords": [