DEP Upgrade frontend build stack

.nvmrc

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

babel.config.json

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

client/src/bundles/bundle.js

@@ -1,2 +1,2 @@
-require('../legacy/BlockLinkFieldEntwine');
-require('boot');
+import '../legacy/BlockLinkFieldEntwine';
+import 'boot';

client/src/legacy/BlockLinkFieldEntwine.js

@@ -1,7 +1,7 @@
 /* global ss */
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 /**
@@ -13,6 +13,8 @@ import { loadComponent } from 'lib/Injector';
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .form__field-holder .block-link-field[data-useEntwine]').entwine({
+    ReactRoot: null,
+
     /**
      * Instantiate the "insert link" dialog when a BlockLinkField is added to a page and
      * renders the equivalent React component for the BlockLinkField
@@ -34,17 +36,23 @@ jQuery.entwine('ss', ($) => {
         hideLabels: true,
       };
 
-      ReactDOM.render(
-        <BlockLinkFieldComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<BlockLinkFieldComponent {...props} />);
     },
 
     /**
      * Remove the component when unmatching
      */
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     },
   });
 });

package.json

@@ -1,9 +1,8 @@
 {
   "name": "silverstripe-elemental-bannerblock",
-  "version": "1.0.0",
   "description": "A collection of CMS blocks for the silverstripe-elemental module",
   "scripts": {
-    "build": "yarn && yarn lint && yarn test && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && yarn lint && yarn test && rm -rf client/dist/* && NODE_ENV=production webpack --mode production --bail --progress",
     "dev": "NODE_ENV=development webpack --progress",
     "watch": "yarn && NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
@@ -26,36 +25,43 @@
     "url": "https://github.com/silverstripe/silverstripe-elemental-bannerblock/issues"
   },
   "homepage": "https://github.com/silverstripe/silverstripe-elemental-bannerblock#readme",
+  "engines": {
+    "node": "^18.x"
+  },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "jquery": "^3.5.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1",
-    "reactstrap": "^5.0.0-beta"
+    "classnames": "^2.3.2",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "reactstrap": "^8.9.0"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.1.0",
-    "@silverstripe/webpack-config": "^1.6.0",
-    "babel-core": "^6.24.1",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "^7.0.0",
-    "babel-preset-env": "^1.6.0",
-    "babel-preset-react": "^6.24.1",
-    "css-loader": "^0.28.1",
-    "enzyme": "^3.6.0",
-    "enzyme-adapter-react-16": "^1.5.0",
-    "eslint": "^4.6.1",
-    "eslint-config-airbnb": "^15.1.0",
-    "eslint-config-airbnb-base": "^12.0.0",
-    "eslint-loader": "^1.7.1",
-    "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
-    "eslint-plugin-react": "^7.3.0",
-    "jest-cli": "^23.6.0",
-    "webpack": "^2.6.1"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "babel-jest": "^29.2.2",
+    "core-js": "^3.26.0",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "jest-cli": "^29.2.2",
+    "jest-environment-jsdom": "^29.3.1",
+    "react-16": "npm:react@^16.14.0",
+    "react-dom-16": "npm:react-dom@^16.14.0",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ],
   "jest": {
+    "testEnvironment": "jsdom",
+    "moduleNameMapper": {
+      "^react-dom/client$": "react-dom-16",
+      "^react-dom((/.*)?)$": "react-dom-16$1",
+      "^react((/.*)?)$": "react-16$1"
+    },
     "roots": [
       "client/src"
     ],
@@ -74,17 +80,5 @@
     "transform": {
       ".*": "babel-jest"
     }
-  },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
-  },
-  "engines": {
-    "node": "^10.x"
   }
 }

tests/Behat/features/element-editor.feature

@@ -42,7 +42,7 @@ Feature: Manage banner blocks
       # TODO Test adding files to a banner block via inline editing
     When I press the "Save" button in the actions menu for block 1
       And I wait 1 second
-    Then I should see a "Saved 'Additional Banner Block' successfully" notice
+    Then I should see a "Saved 'Additional Banner Block' successfully" success toast
 
     When I click on the caret button for block 1
     Then I should see "Additional sample content"
@@ -71,7 +71,7 @@ Feature: Manage banner blocks
       # TODO Test adding files to a banner block via inline editing
     When I press the "Save" button in the actions menu for block 1
       And I wait 1 second
-    Then I should see a "Saved 'Eve's Block' successfully" notice
+    Then I should see a "Saved 'Eve's Block' successfully" success toast
 
   @modal
   Scenario: I can archive a block

webpack.config.js

@@ -1,53 +1,27 @@
 const Path = require('path');
-// Import the core config
-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 config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/elemental-bannerblock')
+    .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: externalJS(ENV, PATHS),
-    module: moduleJS(ENV, PATHS),
-  },
-  {
-    name: 'css',
-    entry: {
+    })
+    .getConfig(),
+  // sass to css
+  new CssWebpackConfig('css', PATHS)
+    .setEntry({
       bundle: `${PATHS.SRC}/styles/bundle.scss`,
       'frontend-default': `${PATHS.SRC}/styles/frontend-default.scss`,
-    },
-    output: {
-      path: PATHS.DIST,
-      filename: 'styles/[name].css',
-    },
-    devtool: (ENV !== 'production') ? 'source-map' : '',
-    module: moduleCSS(ENV, PATHS),
-    plugins: pluginCSS(ENV, PATHS),
-  },
+    })
+    .getConfig(),
 ];
 
 module.exports = config;