DEP Upgrade frontend build stack

.nvmrc

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

_config.php

@@ -1,13 +1,13 @@
 <?php
 
 use SilverStripe\Core\Environment;
-use SilverStripe\Forms\HTMLEditor\HTMLEditorConfig;
 use SilverStripe\Core\Manifest\ModuleLoader;
+use SilverStripe\Forms\HTMLEditor\TinyMCEConfig;
 
 // By default the FontAwesome plugin for TinyMCE is enabled. You can disable it by defining
 // CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN = true in your environment configuration.
 if (!Environment::getEnv('CWP_AGENCY_DISABLE_FONTAWESOME_PLUGIN')) {
-    $cwpEditor = HtmlEditorConfig::get('cwp');
+    $cwpEditor = TinyMCEConfig::get('cwp');
     $pluginPath = ModuleLoader::getModule('cwp/agency-extensions')
         ->getResource('thirdparty/TinyMCE-FontAwesome-Plugin/fontawesome/plugin.min.js')
         ->getURL();

babel.config.json

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

client/src/components/ColorPickerField/ColorPickerField.js

@@ -111,7 +111,7 @@ class ColorPickerField extends Component {
   }
 }
 
-ColorPickerField.proptypes = {
+ColorPickerField.propTypes = {
   colors: PropTypes.arrayOf(PropTypes.shape({
     Title: PropTypes.text,
     CSSClass: PropTypes.text,

client/src/components/ColorPickerField/ColorPickerField.scss

@@ -18,9 +18,6 @@
 }
 
 .color-picker-field-popover {
-  max-width: 380px;
-  width: 380px;
-
   &__option {
     display: flex;
     padding: 4px;
@@ -46,4 +43,9 @@
     align-self: center;
     margin-left: 12px;
   }
+
+  .popover {
+    max-width: 380px;
+    width: 380px;
+  }
 }

client/src/components/FontPickerField/FontPickerField.js

@@ -130,7 +130,7 @@ class FontPickerField extends Component {
   }
 }
 
-FontPickerField.proptypes = {
+FontPickerField.propTypes = {
   fonts: PropTypes.arrayOf(PropTypes.shape({
     Title: PropTypes.text,
     CSSClass: PropTypes.text,

client/src/components/FontPickerField/FontPickerField.scss

@@ -15,9 +15,6 @@
 }
 
 .font-picker-field-popover {
-  max-width: 380px;
-  width: 380px;
-
   &__option {
     padding: 4px 8px;
     max-height: 50px;
@@ -41,6 +38,11 @@
       }
     }
   }
+
+  .popover {
+    max-width: 380px;
+    width: 380px;
+  }
 }
 
 .font-picker-field__selection-preview {

client/src/legacy/entwine.js

@@ -1,10 +1,12 @@
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .form__field-holder .color-picker-field').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const ColorPickerComponent = loadComponent('ColorPickerField');
       const schemaData = this.data('schema');
@@ -15,18 +17,26 @@ jQuery.entwine('ss', ($) => {
         name: schemaData.name,
       };
 
-      ReactDOM.render(
-        <ColorPickerComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<ColorPickerComponent {...props} />,);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 
   $('.js-injector-boot .form__field-holder .font-picker-field').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const FontPickerComponent = loadComponent('FontPickerField');
       const schemaData = this.data('schema');
@@ -37,14 +47,20 @@ jQuery.entwine('ss', ($) => {
         name: schemaData.name,
       };
 
-      ReactDOM.render(
-        <FontPickerComponent {...props} />,
-        this[0]
-      );
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(<FontPickerComponent {...props} />);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 });

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "Base module for the default CWP theme to add features",
   "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",
     "watch": "yarn && NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
     "lint": "eslint client/src && sass-lint --verbose client/src/**/*.scss",
@@ -17,24 +17,21 @@
   },
   "author": "SilverStripe",
   "license": "BSD-3-Clause",
+  "engines": {
+    "node": "^18.x"
+  },
   "dependencies": {
-    "classnames": "^2.2.5",
-    "jquery": "^3.5.0",
+    "classnames": "^2.3.2",
     "merge": "^2.1.1",
-    "mime": "^1.4.1",
-    "prop-types": "^15.6.2",
-    "react": "^15.3.1",
-    "react-dom": "^15.3.1",
-    "reactstrap": "^6.5.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.5",
-    "@silverstripe/webpack-config": "^1.2.0",
-    "babel-jest": "^20.0.3",
-    "bootstrap": "^4.3.1",
-    "jest-cli": "^19.0.2"
-  },
-  "engines": {
-    "node": "^10.x"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   }
 }

webpack.config.js

@@ -1,56 +1,28 @@
 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, 'cwp/agency-extensions')
+    .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),
-    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;