@aaqu/fromcubes-react 0.2.0 → 0.2.1

package/nodes/editor/file-tree.js

@@ -7,7 +7,7 @@
  * module is a pair of pure functions so it can be unit-tested under vitest and
  * still be loaded as a plain browser script by the Node-RED editor.
  *
- * Loaded in the browser via `<script src="fromcubes-react/editor/file-tree.js">`
+ * Loaded in the browser by the asset loader in portal-react.html (`<base>/editor/file-tree.js`)
  * (exposes `window.__fcFileTree`) and in tests via `require()`.
  */
 (function (root, factory) {

package/nodes/editor/format.js

@@ -13,7 +13,7 @@
   "use strict";
 
   const PREFIX = "[FC-Format]";
-  const BASE = "fromcubes-react/prettier/";
+  const BASE = (window.__fcAssetBase || "fromcubes-react/") + "prettier/";
   // UMD builds: each sets window.prettier / window.prettierPlugins.
   const SCRIPTS = [
     "standalone.js",

package/nodes/editor/provider-settings.js

@@ -1,10 +1,10 @@
 /**
- * Settings → Fromcubes: choose the identity provider and the CSS engine.
+ * Settings → Fromcubes: choose the CSS engine and the identity provider.
  *
  * Exactly one provider per kind, shown as a radio list, so two can never be
  * active at once. Reads and writes `/fromcubes-react/providers`; the server
  * validates, persists to <userDir>/fromcubes/providers.json, and applies the
- * change (identity: every portal session reloads; css: every portal rebuilds).
+ * change (css: every portal rebuilds; identity: every portal session reloads).
  * A kind set in settings.js is shown locked.
  *
  * Node-RED shows a pane by the element id `red-ui-settings-tab-<pane id>`,
@@ -18,18 +18,18 @@
   var URL = "fromcubes-react/providers";
 
   var KINDS = [
-    {
-      kind: "identity",
-      title: "Identity provider",
-      hint: "Who is behind a portal session — used by Portal Auth, auth-cast and per-user delivery.",
-      setting: "identityProvider",
-    },
     {
       kind: "css",
       title: "CSS engine",
       hint: "Generates each portal's stylesheet at deploy. Changing it rebuilds every portal.",
       setting: "cssEngine",
     },
+    {
+      kind: "identity",
+      title: "Identity provider",
+      hint: "Who is behind a portal session — used by Portal Auth, auth-cast and per-user delivery.",
+      setting: "identityProvider",
+    },
   ];
 
   function errorText(xhr) {

package/nodes/editor/workspace.js

@@ -19,6 +19,8 @@
   const EDITOR_NAME = "React Editor";
   const FLUSH_DEBOUNCE_MS = 400;
   const MIN_TREE_WIDTH = 150;
+  // Versioned asset path set by portal-react.html (see ASSET_BASE in lib/admin-api.js).
+  const ASSET_BASE = window.__fcAssetBase || "fromcubes-react/";
 
   // ── Module state ────────────────────────────────────────────
 
@@ -636,7 +638,7 @@
    * @returns {void}
    */
   function injectIconSprite() {
-    $.ajax({ url: "fromcubes-react/editor/icons.svg", dataType: "text" })
+    $.ajax({ url: ASSET_BASE + "editor/icons.svg", dataType: "text" })
       .done(function (markup) {
         $("<div>")
           .attr("id", "fc-ws-icon-sprite")
@@ -1107,7 +1109,7 @@
     const brand = $("<div>").addClass("fc-ws-brand").appendTo(header);
     $("<img>")
       .addClass("fc-ws-mark-logo")
-      .attr("src", "fromcubes-react/editor/mark.svg")
+      .attr("src", ASSET_BASE + "editor/mark.svg")
       .attr("alt", "fromcubes")
       .appendTo(brand);
     // One word split by colour — wrapped so the lockup's gap sits between the
@@ -1471,7 +1473,7 @@
       });
     $("<img>")
       .addClass("fc-ws-statusbar-icon")
-      .attr("src", "fromcubes-react/icons/fromcubes-react.svg")
+      .attr("src", ASSET_BASE + "icons/fromcubes-react.svg")
       .attr("alt", "")
       .appendTo(el);
     $("<span>").text(EDITOR_NAME).appendTo(el);

package/nodes/lib/admin-api.js

@@ -1,5 +1,21 @@
 const path = require("path");
 
+/**
+ * Editor assets are also served under a path carrying the core's version
+ * (`fromcubes-react/0.2.0/editor/…`), and the editor template loads them from
+ * there. Every cache in between — the browser, a CDN, a reverse proxy — keys
+ * on the path, so a new release can never be handed an old file, nor a 404
+ * remembered from a moment the route did not exist yet. Query strings are not
+ * enough: some caches ignore them. The unversioned paths stay for anything
+ * that still points at them.
+ */
+const ASSET_VERSION = String(require("../../package.json").version).replace(
+  /[^0-9A-Za-z.+-]/g,
+  "",
+);
+/** Relative to the admin root, as the editor needs it (no leading slash). */
+const ASSET_BASE = "fromcubes-react/" + ASSET_VERSION + "/";
+
 /**
  * Register editor/admin/public support routes for portal-react.
  *
@@ -37,41 +53,36 @@ function registerAdminApi(RED, deps) {
     onProviderChange,
   } = deps;
 
+  /**
+   * Mount one static directory at both its plain and its versioned path.
+   * @param {string} name
+   * @param {string} dir
+   * @returns {void}
+   */
+  function serveStatic(name, dir) {
+    const files = express.static(dir);
+    RED.httpAdmin.use("/fromcubes-react/" + name, permRead, files);
+    RED.httpAdmin.use("/" + ASSET_BASE + name, permRead, files);
+  }
+
   // Since 0.56 monaco-editor has an `exports` map that hides package.json;
   // its CommonJS entry is min/vs/index.js, so the AMD build (loader.js and
   // editor/editor.main.js) sits in the same directory.
-  const monacoVsPath = path.dirname(require.resolve("monaco-editor"));
-  RED.httpAdmin.use(
-    "/fromcubes-react/vs",
-    permRead,
-    express.static(monacoVsPath),
-  );
+  serveStatic("vs", path.dirname(require.resolve("monaco-editor")));
 
   // Editor-side workspace plugin (tree + full-screen Monaco overlay). Served
   // as static files instead of being inlined into portal-react.html so the
   // node's editor template stays readable.
-  RED.httpAdmin.use(
-    "/fromcubes-react/editor",
-    permRead,
-    express.static(path.join(__dirname, "..", "editor")),
-  );
+  serveStatic("editor", path.join(__dirname, "..", "editor"));
 
   // The node icon doubles as the editor's status-bar mark. Serving the icons
   // directory here keeps one copy on disk and spares the client from having to
   // know the package name that Node-RED's own /icons route is keyed by.
-  RED.httpAdmin.use(
-    "/fromcubes-react/icons",
-    permRead,
-    express.static(path.join(__dirname, "..", "icons")),
-  );
+  serveStatic("icons", path.join(__dirname, "..", "icons"));
 
   // Prettier's browser builds, straight from node_modules — same arrangement
   // as Monaco at /fromcubes-react/vs. Nothing is fetched until someone formats.
-  RED.httpAdmin.use(
-    "/fromcubes-react/prettier",
-    permRead,
-    express.static(path.dirname(require.resolve("prettier/package.json"))),
-  );
+  serveStatic("prettier", path.dirname(require.resolve("prettier/package.json")));
 
   const CSS_HASH_RE = /^[a-f0-9]{1,64}$/;
   function findCssByHash(reqHash) {
@@ -235,4 +246,4 @@ function registerProviderRoutes(RED, deps) {
   );
 }
 
-module.exports = { registerAdminApi };
+module.exports = { registerAdminApi, ASSET_BASE };

package/nodes/portal-react.html

@@ -1,12 +1,27 @@
 <!-- ============================================================
      Portal Code Workspace — sidebar tab + full-screen editor overlay.
-     Served from nodes/editor/ via the /fromcubes-react/editor admin route.
+     Served from nodes/editor/ via the /fromcubes-react/<version>/editor admin route.
      ============================================================ -->
-<link rel="stylesheet" href="fromcubes-react/editor/workspace.css" />
-<script type="text/javascript" src="fromcubes-react/editor/file-tree.js"></script>
-<script type="text/javascript" src="fromcubes-react/editor/workspace.js"></script>
-<script type="text/javascript" src="fromcubes-react/editor/format.js"></script>
-<script type="text/javascript" src="fromcubes-react/editor/provider-settings.js"></script>
+<script type="text/javascript">
+  // Loaded from the versioned asset path the runtime exports (ASSET_BASE in
+  // lib/admin-api.js), so no cache — browser, CDN or proxy — can serve this
+  // template an older file, or a 404 it remembered. Execution order follows
+  // insertion order (async = false); every script waits for what it needs.
+  (function () {
+    const base = (RED.settings && RED.settings.portalReactAssetBase) || "fromcubes-react/";
+    window.__fcAssetBase = base;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = base + "editor/workspace.css";
+    document.head.appendChild(link);
+    ["file-tree.js", "workspace.js", "format.js", "provider-settings.js"].forEach(function (file) {
+      const s = document.createElement("script");
+      s.src = base + "editor/" + file;
+      s.async = false;
+      document.head.appendChild(s);
+    });
+  })();
+</script>
 
 <!-- ============================================================
      Shared: Monaco loader (used by both node editors)
@@ -1041,10 +1056,11 @@
         return;
       }
       const s = document.createElement("script");
-      s.src = "fromcubes-react/vs/loader.js";
+      const base = window.__fcAssetBase || "fromcubes-react/";
+      s.src = base + "vs/loader.js";
       s.onload = function () {
         console.log(PREFIX, "loader.js loaded, configuring require paths");
-        require.config({ paths: { vs: "fromcubes-react/vs" } });
+        require.config({ paths: { vs: base + "vs" } });
         require(["vs/editor/editor.main"], function () {
           console.log(PREFIX, "editor.main loaded");
           ensureJsxSetup();

package/nodes/portal-react.js

@@ -1629,12 +1629,17 @@ module.exports = function (RED) {
     }); // end setImmediate
   }
 
+  const { registerAdminApi, ASSET_BASE } = require("./lib/admin-api");
   RED.nodes.registerType("portal-react", PortalReactNode, {
     dynamicModuleList: "libs",
+    // Read by portal-react.html to load the editor assets from their
+    // versioned path (see ASSET_BASE in lib/admin-api.js).
+    settings: {
+      portalReactAssetBase: { value: ASSET_BASE, exportable: true },
+    },
   });
 
   const express = loadExpress();
-  const { registerAdminApi } = require("./lib/admin-api");
   registerAdminApi(RED, {
     express,
     permRead: PERM_READ,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aaqu/fromcubes-react",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Fromcubes React - React portals for Node-RED, built at deploy, with live WebSocket data binding",
   "type": "commonjs",
   "keywords": [