DEP Upgrade frontend build stack (#182)

.eslintrc.js

@@ -0,0 +1 @@
+module.exports = require('@silverstripe/eslint-config/.eslintrc');

.nvmrc

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

babel.config.json

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

client/src/bundles/ContentReviewForm.js

@@ -2,7 +2,7 @@
 import i18n from 'i18n';
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 const FormBuilderModal = loadComponent('FormBuilderModal');
@@ -12,7 +12,7 @@ const FormBuilderModal = loadComponent('FormBuilderModal');
  * silverstripe/admin for reference.
  */
 jQuery.entwine('ss', ($) => {
-	/**
+  /**
    * Kick off a "content due for review" dialog from the CMS actions.
    */
   $('.cms-content-actions .content-review__button').entwine({
@@ -42,10 +42,12 @@ jQuery.entwine('ss', ($) => {
     },
   });
 
-	/**
+  /**
    * Uses reactstrap in order to replicate the bootstrap styling and JavaScript behaviour.
    */
   $('#content-review__dialog-wrapper').entwine({
+    ReactRoot: null,
+
     onunmatch() {
       // solves errors given by ReactDOM "no matched root found" error.
       this._clearModal();
@@ -70,7 +72,12 @@ jQuery.entwine('ss', ($) => {
       const modalSchemaUrl = `${sectionConfig.form.ReviewContentForm.schemaUrl}/${id}`;
       const title = i18n._t('ContentReview.CONTENT_DUE_FOR_REVIEW', 'Content due for review');
 
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <FormBuilderModal
           title={title}
           isOpen={isOpen}
@@ -82,13 +89,16 @@ jQuery.entwine('ss', ($) => {
           responseClassBad="modal__response modal__response--error"
           responseClassGood="modal__response modal__response--good"
           identifier="ContentReview.CONTENT_DUE_FOR_REVIEW"
-        />,
-        this[0]
+        />
       );
     },
 
     _clearModal() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     },
 
     _handleSubmitModal(data, action, submitFn) {

client/src/bundles/bundle.js

@@ -1,3 +1,3 @@
-import 'bundles/ContentReviewForm.js';
-import 'bundles/ContentReviewSettings.js';
-import 'bundles/PagesDueForReview.js';
+import 'bundles/ContentReviewForm';
+import 'bundles/ContentReviewSettings';
+import 'bundles/PagesDueForReview';

client/src/styles/ContentReviewForm.scss

@@ -1,7 +1,7 @@
 // The bell button, shows up next to the major actions (save, publish, etc) when
 // viewing a page in the CMS
 .content-review__button {
-  background: url("images/icon-bell.png") center center no-repeat;
+  background: url('../images/icon-bell.png') center center no-repeat;
   background-position: 0 0;
   display: inline-block;
   height: 20px;

package.json

@@ -1,9 +1,9 @@
 {
   "name": "silverstripe-contentreview",
-  "version": "4.0.0",
   "description": "Flags pages for periodical author review (incl. reporting)",
   "scripts": {
-    "build": "yarn && 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": "yarn && NODE_ENV=development webpack --watch --progress",
     "css": "WEBPACK_CHILD=css npm run build",
     "lint": "eslint client/src; sass-lint -v"
@@ -23,22 +23,25 @@
     "url": "https://github.com/silverstripe/silverstripe-contentreview/issues"
   },
   "homepage": "https://github.com/silverstripe/silverstripe-contentreview#readme",
+  "engines": {
+    "node": "^18.x"
+  },
   "dependencies": {
-    "jquery": "^3.4.0",
-    "react": "15.3.1",
-    "react-dom": "15.3.1",
-    "react-redux": "^4.4.1",
-    "redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz"
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-redux": "^8.0.4",
+    "redux": "^4.2.0"
   },
   "devDependencies": {
-    "@silverstripe/webpack-config": "^0.2.5",
-    "babel-core": "^6.24.1",
-    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-es2016": "^6.24.1",
-    "eslint": "^2.7.0",
-    "eslint-config-airbnb": "^6.2.0"
+    "@silverstripe/eslint-config": "^1.0.0-alpha6",
+    "@silverstripe/webpack-config": "^2.0.0-alpha5",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   },
-  "engines": {
-    "node": "^10.x"
-  }
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

webpack.config.js

@@ -1,54 +1,26 @@
 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'),
-  THIRDPARTY: Path.resolve('thirdparty'),
 };
 
 const config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/contentreview')
+    .setEntry({
       contentreview: `${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({
       contentreview: `${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(),
 ];
 
 module.exports = config;