Expose React and ReactDOM globally for SENAITE add-ons

CHANGES.rst

@@ -4,6 +4,7 @@ Changelog
 2.7.0 (unreleased)
 ------------------
 
+- #2961 Expose React and ReactDOM globally for SENAITE add-ons
 - #2957 Harmonize form input widths via tunable CSS variables
 - #2956 Restrict client discount fields to lab staff
 - #2958 Add labels with colors, filtering, and bulk-manage modal for samples

src/senaite/core/browser/static/bundles/senaite.core.eaf8b9b3ea282bf15058.js.LICENSE.txt

@@ -0,0 +1 @@
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */

src/senaite/core/browser/static/resources.pt

@@ -1 +1 @@
-<script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery/jquery.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-form/jquery.form.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-ui/jquery-ui.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/handlebars/handlebars.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/popperjs/popper.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap/js/bootstrap.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-confirmation2/bootstrap-confirmation.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-select/js/bootstrap-select.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/tinymce/tinymce.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/d3/d3.min.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-select/css/bootstrap-select.min.css"/><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/modules/jquery-ui/themes/smoothness/jquery-ui.min.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.5aa5fa48311f87f14b7c.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.widgets.4ad3c5f94c059846abec.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.css"/><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.widgets.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/thirdparty.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/thirdparty.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/legacy.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/legacy.css"/>
+<script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/react/vendor-react.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery/jquery.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-form/jquery.form.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-ui/jquery-ui.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/handlebars/handlebars.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/popperjs/popper.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap/js/bootstrap.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-confirmation2/bootstrap-confirmation.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-select/js/bootstrap-select.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/tinymce/tinymce.min.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/d3/d3.min.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/modules/bootstrap-select/css/bootstrap-select.min.css"/><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/modules/jquery-ui/themes/smoothness/jquery-ui.min.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.eaf8b9b3ea282bf15058.js"></script><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.widgets.7d1cc8eb25603697d053.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.css"/><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/senaite.core.widgets.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/thirdparty.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/thirdparty.css"/><script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/bundles/legacy.js"></script><link href="#" rel="stylesheet" tal:attributes="href string:${view/site_url}/++plone++senaite.core.static/bundles/legacy.css"/>

webpack/app/resources.pt

@@ -1,4 +1,6 @@
 <!-- external JS libraries -->
+<!-- shared React instance, consumed via Webpack externals by core and add-ons -->
+<script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/react/vendor-react.js"></script>
 <script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery/jquery.min.js"></script>
 <script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-form/jquery.form.min.js"></script>
 <script tal:attributes="src string:${view/site_url}/++plone++senaite.core.static/modules/jquery-ui/jquery-ui.min.js"></script>

webpack/app/vendor-react.js

@@ -0,0 +1,18 @@
+// SENAITE shared React vendor bundle
+//
+// Exposes a single React/ReactDOM instance on the global scope so that
+// senaite.core, its add-ons and standalone views (which do not pull in the
+// core resources, e.g. senaite.impress publish views) can all consume the
+// same React via Webpack externals instead of bundling their own copy.
+//
+// React 19 no longer ships a UMD build, so we build this tiny self-executing
+// bundle ourselves. It is loaded as a plain <script> (see resources.pt),
+// exactly like the vendored jQuery / TinyMCE libraries.
+import React from "react";
+import * as ReactDOM from "react-dom";
+import * as ReactDOMClient from "react-dom/client";
+
+window.React = React;
+// Merge react-dom (createPortal, flushSync, ...) with react-dom/client
+// (createRoot, hydrateRoot) so consumers of either module resolve here.
+window.ReactDOM = Object.assign({}, ReactDOM, ReactDOMClient);

webpack/package.json

@@ -19,9 +19,9 @@
   "author": "RIDING BYTES & NARALABS",
   "license": "GPL-2.0-only",
   "dependencies": {
+    "@babel/runtime": "^7.29.2",
     "@fortawesome/fontawesome-free": "^6.7.2",
     "bootstrap": "^4.6.0",
-    "@babel/runtime": "^7.29.2",
     "bootstrap-confirmation2": "^4.2.1",
     "bootstrap-select": "^1.13.18",
     "d3": "^7.9.0",
@@ -31,8 +31,8 @@
     "jquery-form": "^4.3.0",
     "jquery-ui": "^1.14.2",
     "popper.js": "^1.16.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
     "react-dropzone": "^15.0.0",
     "tinymce": "^8.3.2"
   },

webpack/webpack.config.js

@@ -21,7 +21,7 @@ const staticPath = path.resolve(__dirname, "../src/senaite/core/browser/static")
 console.log(`RUNNING WEBPACK IN '${mode}' MODE`);
 
 
-module.exports = {
+const coreConfig = {
   // https://webpack.js.org/configuration/devtool
   devtool: isDev ? "eval" : "source-map",
   // https://webpack.js.org/configuration/mode/#usage
@@ -287,6 +287,59 @@ module.exports = {
     $: "jQuery",
     jquery: "jQuery",
     bootstrap: "bootstrap",
-    tinyMCE: "tinymce"
+    tinyMCE: "tinymce",
+    // Consume the shared React instance from the vendor-react bundle (see
+    // vendor-react.js / resources.pt) instead of bundling our own copy.
+    react: "React",
+    "react-dom": "ReactDOM",
+    "react-dom/client": "ReactDOM"
   }
 };
+
+
+// Standalone vendor bundle that provides the shared React instance on the
+// global scope. It MUST NOT externalize react, since its whole purpose is to
+// bundle React once and publish it (window.React / window.ReactDOM).
+const vendorReactConfig = {
+  devtool: isDev ? "eval" : "source-map",
+  mode: mode,
+  context: path.resolve(__dirname, "app"),
+  entry: {
+    "vendor-react": "./vendor-react.js",
+  },
+  output: {
+    // stable filename so any view can reference it via a <script> tag
+    filename: "vendor-react.js",
+    path: path.resolve(staticPath, "modules/react"),
+    publicPath: "/++plone++senaite.core.static/modules/react/",
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|jsx)$/,
+        exclude: [/node_modules/],
+        use: [
+          {
+            loader: "babel-loader",
+            options: { cacheDirectory: true },
+          },
+        ],
+      },
+    ],
+  },
+  optimization: {
+    minimize: isProd,
+    minimizer: [
+      new TerserPlugin({
+        terserOptions: {
+          sourceMap: false,
+          format: { comments: false },
+          compress: { drop_console: true, passes: 2 },
+        },
+      }),
+    ],
+  },
+};
+
+
+module.exports = [coreConfig, vendorReactConfig];

webpack/yarn.lock

@@ -4408,10 +4408,10 @@ punycode@^2.1.0:
   resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.0.tgz"
   integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
 
-react-dom@^19.2.4:
-  version "19.2.4"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.4.tgz#6fac6bd96f7db477d966c7ec17c1a2b1ad8e6591"
-  integrity sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==
+react-dom@^19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.7.tgz#0450dc9ae9ddbff76ef196401cd8b8c7fb466ccc"
+  integrity sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==
   dependencies:
     scheduler "^0.27.0"
 
@@ -4429,10 +4429,10 @@ react-is@^16.13.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-react@^19.2.4:
-  version "19.2.4"
-  resolved "https://registry.yarnpkg.com/react/-/react-19.2.4.tgz#438e57baa19b77cb23aab516cf635cd0579ee09a"
-  integrity sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==
+react@^19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.2.7.tgz#1f47a1bfc06f8ec885752c6f4af14369a9f8260b"
+  integrity sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==
 
 readdirp@^4.0.1:
   version "4.1.2"