DEP Upgrade build stack (#133)

* DEP Update webpack config and deps

* DEP Update code to work with upgraded deps

* MNT Run yarn build

.nvmrc

@@ -0,0 +1 @@
+18

client/src/legacy/TestReactFormBuilder.js

@@ -1,7 +1,7 @@
 /* global window */
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { Provider } from 'react-redux';
 import { provideInjector } from 'lib/Injector';
 import FormBuilderLoader from 'containers/FormBuilderLoader/FormBuilderLoader';
@@ -15,6 +15,8 @@ jQuery.entwine('ss', ($) => {
    * Uses React to rebuild the list of fields from FrameworkTest's TestPages.
    */
   $('.js-injector-boot .TestReactFormBuilder').entwine({
+    ReactRoot: null,
+
     onmatch() {
       this._renderForm();
     },
@@ -42,20 +44,25 @@ jQuery.entwine('ss', ($) => {
         .config.sections.find((section) => section.name === sectionConfigKey);
       const schemaUrl = sectionConfig.form.TestEditForm.schemaUrl;
 
-      ReactDOM.render(
+      const root = createRoot(this.container());
+      root.render(
         <Provider store={store}>
           <InjectedFormBuilderLoader
             schemaUrl={schemaUrl}
             handleSubmit={(...args) => this._handleSubmit(...args)}
             identifier="FrameworkTest.ReactSection"
           />
-        </Provider>,
-        this.container()
+        </Provider>
       );
+      this.setReactRoot(root);
     },
 
     _clearForm() {
-      ReactDOM.unmountComponentAtNode(this.container());
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
       // this.empty();
     },
 

package.json

@@ -2,7 +2,6 @@
   "name": "silverstripe-asset-admin",
   "version": "0.0.0",
   "description": "Asset management for the SilverStripe CMS",
-  "main": "./client/src/boot/index.js",
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
@@ -14,10 +13,11 @@
   },
   "author": "SilverStripe Ltd",
   "engines": {
-    "node": "6.x"
+    "node": "18.x"
   },
   "scripts": {
-    "build": "yarn && NODE_ENV=production webpack -p --bail --progress",
+    "build": "yarn && 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",
     "lock": "npm-shrinkwrap --dev",
     "test": "NODE_PATH=\"./client/src\" jest",
@@ -38,20 +38,23 @@
     "testRunner": "<rootDir>/node_modules/jest-cli/src/testRunners/jasmine/jasmine2.js"
   },
   "dependencies": {
-    "react": "^15.3.1",
-    "react-addons-css-transition-group": "^15.3.1",
-    "react-dom": "^15.3.1",
-    "react-redux": "^4.4.1",
-    "react-router": "^2.4.1",
-    "react-router-redux": "^4.0.5",
-    "redux": "https://registry.npmjs.org/redux/-/redux-3.0.5.tgz",
-    "redux-thunk": "^2.1.0",
-    "tether": "^1.3.2",
+    "core-js": "^3.26.1",
+    "react": "^18.2.0",
+    "react-addons-css-transition-group": "^15.6.2",
+    "react-dom": "^18.2.0",
+    "react-redux": "^8.0.5",
+    "react-router": "^6.4.5",
+    "react-router-redux": "^4.0.8",
+    "redux": "^4.2.0",
+    "redux-thunk": "^2.4.2",
+    "tether": "^2.0.0",
     "url": "^0.11.0"
   },
   "devDependencies": {
-    "@silverstripe/webpack-config": "^0.4.0",
+    "@silverstripe/webpack-config": "^2.0.0-alpha1",
     "babel-jest": "^20.0.3",
-    "jest-cli": "^19.0.2"
+    "jest-cli": "^19.0.2",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^5.0.0"
   }
 }

webpack.config.js

@@ -1,42 +1,18 @@
 const Path = require('path');
-const webpackConfig = require('@silverstripe/webpack-config');
+const { JavascriptWebpackConfig } = require('@silverstripe/webpack-config');
 
-const {
-  resolveJS,
-  externalJS,
-  moduleJS,
-  pluginJS,
-} = webpackConfig;
-
-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'),
-  LEGACY_SRC: Path.resolve('client/src'),
 };
 
 const config = [
-  {
-    name: 'js',
-    entry: {
-      legacy: `${PATHS.LEGACY_SRC}/bundles/legacy.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),
-  },
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/frameworktest')
+    .setEntry({
+      legacy: `${PATHS.SRC}/bundles/legacy.js`,
+    })
+    .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;
+module.exports = config;