DEP Upgrade frontend build stack (#187)

.nvmrc

@@ -1 +1 @@
-10
+18

babel.config.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ]
+}

client/src/legacy/entwine/SiteSummary.js

@@ -1,24 +1,34 @@
 /* global window */
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import ModuleDetails from 'components/ModuleDetails/ModuleDetails';
 
 window.jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .package-summary__details-container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const dataSchema = this.data('schema');
 
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ModuleDetails
           detailsId={this.attr('id')}
           dataSchema={dataSchema}
-        />,
-        this[0]
+        />
       );
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 

package.json

@@ -1,6 +1,5 @@
 {
   "name": "silverstripe-maintenance",
-  "version": "0.0.0",
   "description": "Provides information about the packages you have installed in your SilverStripe site",
   "license": "BSD-3-Clause",
   "repository": {
@@ -13,10 +12,10 @@
   },
   "author": "Bring Your Own Ideas",
   "engines": {
-    "node": ">=10.x"
+    "node": ">=18.x"
   },
   "scripts": {
-    "build": "yarn && yarn lint && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -26,19 +25,24 @@
     "lint-js-fix": "eslint client/src --fix",
     "lint-sass": "sass-lint client/src"
   },
+  "dependencies": {
+    "classnames": "^2.3.2",
+    "core-js": "^3.26.0",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "reactstrap": "^8.9.0"
+  },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.6",
-    "@silverstripe/webpack-config": "^1.0.0",
-    "expose-loader": "^0.7.4",
-    "sass-loader": "^6.0.7"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
-  "dependencies": {
-    "babel-polyfill": "6.7.4",
-    "classnames": "^2.2.5",
-    "jquery": "^3.5.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
-    "reactstrap": "^8.0.0"
-  }
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

webpack.config.js

@@ -1,60 +1,31 @@
 const Path = require('path');
-const webpackConfig = require('@silverstripe/webpack-config');
-const {
-  resolveJS,
-  externalJS,
-  moduleJS,
-  pluginJS,
-  moduleCSS,
-  pluginCSS,
-} = webpackConfig;
+const { JavascriptWebpackConfig, CssWebpackConfig } = require('@silverstripe/webpack-config');
 
 const ENV = process.env.NODE_ENV;
 const PATHS = {
-  MODULES: 'node_modules',
-  FILES_PATH: '../',
   ROOT: Path.resolve(),
   SRC: Path.resolve('client/src'),
   DIST: Path.resolve('client/dist'),
 };
 
-const externals = externalJS(ENV, PATHS);
-delete externals.reactstrap;
-
 const config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'bringyourownideas/silverstripe-maintenance')
+    .setEntry({
       bundle: `${PATHS.SRC}/bundles/bundle.js`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'js/[name].js',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    resolve: resolveJS(ENV, PATHS),
-    externals,
-    module: moduleJS(ENV, PATHS),
-    plugins: pluginJS(ENV, PATHS),
-  },
-  {
-    name: 'css',
-    entry: {
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
       bundle: `${PATHS.SRC}/styles/bundle.scss`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'styles/[name].css',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    module: moduleCSS(ENV, PATHS),
-    plugins: pluginCSS(ENV, PATHS),
-  },
+    })
+    .getConfig(),
 ];
 
 // Use WEBPACK_CHILD=js or WEBPACK_CHILD=css env var to run a single config
 module.exports = (process.env.WEBPACK_CHILD)
   ? config.find((entry) => entry.name === process.env.WEBPACK_CHILD)
-  : module.exports = config;
+  : config;