DEP Upgrade webpack build stack (#263)

* DEP Upgrade webpack config and deps

* FIX Set correct proptypes for react components

* DEP Update code to work with upgraded deps

* MNT Run yarn build

.nvmrc

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

client/src/bundles/bundle.js

@@ -5,9 +5,9 @@
  */
 
 // Expose fields (see webpack config for matching "externals" config)
-require('expose-loader?HistoryViewer!components/HistoryViewer/HistoryViewer');
+require('expose-loader?exposes=HistoryViewer!components/HistoryViewer/HistoryViewer');
 
-require('expose-loader?versionType!types/versionType');
+require('expose-loader?exposes=versionType!types/versionType');
 
 // Legacy CMS
 require('../legacy/ArchiveAdmin/ArchiveAdmin');

client/src/components/HistoryViewer/HistoryViewer.js

@@ -390,16 +390,16 @@ class HistoryViewer extends Component {
 HistoryViewer.propTypes = {
   contextKey: PropTypes.string,
   limit: PropTypes.number,
-  ListComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  ListComponent: PropTypes.elementType.isRequired,
   offset: PropTypes.number,
   recordId: PropTypes.number.isRequired,
   currentVersion: PropTypes.oneOfType([PropTypes.bool, versionType]),
   compare: compareType,
   isInGridField: PropTypes.bool,
   isPreviewable: PropTypes.bool,
   isRevertable: PropTypes.bool,
-  VersionDetailComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  CompareWarningComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  VersionDetailComponent: PropTypes.elementType.isRequired,
+  CompareWarningComponent: PropTypes.elementType.isRequired,
   versions: PropTypes.shape({
     versions: PropTypes.shape({
       pageInfo: PropTypes.shape({

client/src/components/HistoryViewer/HistoryViewerToolbar.js

@@ -75,8 +75,8 @@ HistoryViewerToolbar.propTypes = {
   actions: PropTypes.shape({
     revertToVersion: PropTypes.func.isRequired,
   }),
-  FormActionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  ViewModeComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  FormActionComponent: PropTypes.elementType.isRequired,
+  ViewModeComponent: PropTypes.elementType.isRequired,
   isLatestVersion: PropTypes.bool,
   isPreviewable: PropTypes.bool,
   isRevertable: PropTypes.bool,

client/src/components/HistoryViewer/HistoryViewerVersion.js

@@ -244,8 +244,8 @@ HistoryViewerVersion.propTypes = {
   onCompareMode: PropTypes.func,
   compare: compareType,
   compareModeAvailable: PropTypes.bool,
-  StateComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  FormActionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  StateComponent: PropTypes.elementType.isRequired,
+  FormActionComponent: PropTypes.elementType.isRequired,
 };
 
 HistoryViewerVersion.defaultProps = {

client/src/components/HistoryViewer/HistoryViewerVersionDetail.js

@@ -217,11 +217,11 @@ HistoryViewerVersionDetail.propTypes = {
   isLatestVersion: PropTypes.bool,
   isPreviewable: PropTypes.bool,
   isRevertable: PropTypes.bool,
-  ListComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  PreviewComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  ListComponent: PropTypes.elementType.isRequired,
+  PreviewComponent: PropTypes.elementType,
   recordId: PropTypes.number.isRequired,
   schemaUrl: PropTypes.string.isRequired,
-  ToolbarComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  ToolbarComponent: PropTypes.elementType.isRequired,
   version: versionType,
   compare: PropTypes.oneOfType([
     PropTypes.shape({

client/src/components/HistoryViewer/HistoryViewerVersionList.js

@@ -126,10 +126,10 @@ class HistoryViewerVersionList extends PureComponent {
 HistoryViewerVersionList.propTypes = {
   extraClass: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]),
   showHeader: PropTypes.bool,
-  FormAlertComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-  HeadingComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  FormAlertComponent: PropTypes.elementType.isRequired,
+  HeadingComponent: PropTypes.elementType.isRequired,
   messages: PropTypes.arrayOf(messageType),
-  VersionComponent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
+  VersionComponent: PropTypes.elementType.isRequired,
   versions: PropTypes.arrayOf(versionType),
   compare: compareType,
   compareModeAvailable: PropTypes.bool,

client/src/legacy/HistoryViewer/HistoryViewerEntwine.js

@@ -1,6 +1,7 @@
 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 +10,8 @@ import { loadComponent } from 'lib/Injector';
  */
 jQuery.entwine('ss', ($) => {
   $('.js-injector-boot .history-viewer__container').entwine({
+    ReactRoot: null,
+
     onmatch() {
       const cmsContent = this.closest('.cms-content').attr('id');
       const context = (cmsContent)
@@ -25,14 +28,17 @@ jQuery.entwine('ss', ($) => {
         isInGridField: schemaData.data.isInGridField || !this.hasClass('history-viewer--standalone'),
       };
 
-      ReactDOM.render(
-        <HistoryViewerComponent {...props} />,
-        this[0]
-      );
+      const root = createRoot(this[0]);
+      root.render(<HistoryViewerComponent {...props} />);
+      this.setReactRoot(root);
     },
 
     onunmatch() {
-      ReactDOM.unmountComponentAtNode(this[0]);
+      const root = this.getReactRoot();
+      if (root) {
+        root.unmount();
+        this.setReactRoot(null);
+      }
     }
   });
 

client/src/state/historyviewer/HistoryViewerActions.js

@@ -1,5 +1,5 @@
+import { v1 as uuidv1 } from 'uuid';
 import HISTORY_VIEWER from './HistoryViewerActionTypes';
-import uuidv1 from 'uuid/v1';
 
 /**
  * Setting the current version will enable context views for a specific record

client/src/types/versionType.js

@@ -11,11 +11,11 @@ const versionType = PropTypes.shape({
   version: PropTypes.number,
   absoluteLink: PropTypes.string,
   lastEdited: PropTypes.string,
-  published: PropTypes.boolean,
-  draft: PropTypes.boolean,
-  deleted: PropTypes.boolean,
-  liveVersion: PropTypes.boolean,
-  latestDraftVersion: PropTypes.boolean,
+  published: PropTypes.bool,
+  draft: PropTypes.bool,
+  deleted: PropTypes.bool,
+  liveVersion: PropTypes.bool,
+  latestDraftVersion: PropTypes.bool,
   publisher: memberShape,
   author: memberShape,
 });