DEP Upgrade build stack (#186)

.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/ShareDraftContentEntwine');
-require('boot');
+import '../legacy/ShareDraftContentEntwine';
+import 'boot';

client/src/legacy/ShareDraftContentEntwine.js

@@ -1,6 +1,6 @@
 import jQuery from 'jquery';
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { createRoot } from 'react-dom/client';
 import { loadComponent } from 'lib/Injector';
 
 /**
@@ -9,6 +9,8 @@ import { loadComponent } from 'lib/Injector';
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .share-draft-content__placeholder').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const cmsContent = this.closest('.cms-content').attr('id');
       const context = (cmsContent)
@@ -20,20 +22,28 @@ jQuery.entwine('ss', ($) => {
       // part of the CMS
       const contextKey = this.closest('.cms-preview').length > 0 ? 'preview' : 'edit';
 
-      ReactDOM.render(
+      let root = this.getReactRoot();
+      if (!root) {
+        root = createRoot(this[0]);
+        this.setReactRoot(root);
+      }
+      root.render(
         <ShareDraftContentComponent
           id={`share-draft-content-${contextKey}`}
           links={{
             generateLink: this.data('url'),
             learnMore: this.data('helpurl'),
           }}
-        />,
-        this[0]
+        />
       );
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 });

package.json

@@ -1,11 +1,6 @@
 {
   "name": "sharedraftcontent",
-  "version": "2.3.0",
   "description": "Share draft page content with non-CMS users",
-  "main": "./client/src/boot/index.js",
-  "keywords": [
-    "SilverStripe"
-  ],
   "license": "BSD-3-Clause",
   "homepage": "https://github.com/silverstripe/silverstripe-sharedraftcontent",
   "repository": {
@@ -17,10 +12,10 @@
   },
   "author": "SilverStripe Ltd",
   "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",
@@ -31,28 +26,22 @@
     "test": "echo 1 > /dev/null"
   },
   "dependencies": {
-    "classnames": "^2.2.6",
-    "isomorphic-fetch": "^2.2.1",
-    "jquery": "^3.5.0",
-    "prop-types": "^15.6.2",
-    "react": "^16.6.1",
-    "react-dom": "^16.6.1"
+    "classnames": "^2.3.2",
+    "isomorphic-fetch": "^3.0.0",
+    "prop-types": "^15.8.1",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
   },
   "devDependencies": {
-    "@silverstripe/eslint-config": "^0.0.6",
-    "@silverstripe/webpack-config": "^1.3.0",
-    "@storybook/addon-actions": "^3.4.10",
-    "@storybook/react": "^3.4.10",
-    "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"
   },
-  "babel": {
-    "presets": [
-      "env",
-      "react"
-    ],
-    "plugins": [
-      "transform-object-rest-spread"
-    ]
-  }
+  "resolutions": {
+    "colors": "1.4.0"
+  },
+  "browserslist": [
+    "defaults"
+  ]
 }

webpack.config.js

@@ -1,56 +1,30 @@
 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 config = [
-  {
-    name: 'js',
-    entry: {
+  // Main JS bundle
+  new JavascriptWebpackConfig('js', PATHS, 'silverstripe/sharedraftcontent')
+    .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-cms': `${PATHS.SRC}/styles/bundle-cms.scss`,
       'bundle-frontend': `${PATHS.SRC}/styles/bundle-frontend.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;