Continue some version upgrades and tune webpack config for v5

Author: nomcopter

demo/index.tsx

@@ -1,23 +1,10 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AppContainer } from 'react-hot-loader';
 import { ExampleApp } from './ExampleApp';
 
 const APP_ELEMENT = document.getElementById('app')!;
 const render = (Component: React.ComponentClass<any>) => {
-  ReactDOM.render(
-    <AppContainer>
-      <Component />
-    </AppContainer>,
-    APP_ELEMENT,
-  );
+  ReactDOM.render(<Component />, APP_ELEMENT);
 };
 
 render(ExampleApp);
-
-declare var module: any;
-if (module.hot) {
-  module.hot.accept('./ExampleApp', () => {
-    render(require('./ExampleApp').ExampleApp);
-  });
-}

package.json

@@ -40,7 +40,7 @@
     "version": "npm-run-all test bundle && git add -A docs/"
   },
   "dependencies": {
-    "classnames": "^2.3.1",
+    "classnames": "^2.3.2",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.8.1",
@@ -52,23 +52,22 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^4.7.0",
-    "@blueprintjs/icons": "^4.4.0",
+    "@blueprintjs/core": "^4.15.1",
+    "@blueprintjs/icons": "^4.13.1",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@types/chai": "^4.3.0",
     "@types/classnames": "^2.3.1",
     "@types/dom4": "^2.0.2",
-    "@types/lodash": "^4.14.180",
-    "@types/mocha": "^5.2.7",
-    "@types/prop-types": "^15.7.4",
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-hot-loader": "^4.1.1",
-    "@types/uuid": "^3.4.10",
+    "@types/lodash": "^4.14.191",
+    "@types/mocha": "^7.0.2",
+    "@types/prop-types": "^15.7.5",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.10",
+    "@types/uuid": "^9.0.0",
     "@types/webpack": "^5.28.0",
     "chai": "^4.3.6",
     "css-loader": "^6.7.3",
     "dnd-core": "16.0.1",
-    "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
     "jsdom": "^15.2.1",
@@ -82,7 +81,7 @@
     "prettier": "^2.6.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-hot-loader": "^4.13.1",
+    "react-refresh": "^0.14.0",
     "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
@@ -91,11 +90,11 @@
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
     "tslint-react": "^5.0.0",
-    "typescript": "^4.6.3",
+    "typescript": "^4.9.5",
     "webpack": "^5.75.0",
     "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
-    "yarn-deduplicate": "^3.1.0"
+    "yarn-deduplicate": "^6.0.1"
   },
   "peerDependencies": {
     "react": "16 - 18"

src/MosaicDropTarget.tsx

@@ -15,8 +15,8 @@ export function MosaicDropTarget({ path, position }: MosaicDropTargetProps) {
   const { mosaicId } = useContext(MosaicContext);
   const [{ isOver, draggedMosaicId }, connectDropTarget] = useDrop({
     accept: MosaicDragType.WINDOW,
-    drop: (item: MosaicDragItem, _monitor): MosaicDropData => {
-      if (mosaicId === (item || {}).mosaicId) {
+    drop: (item: MosaicDragItem | undefined, _monitor): MosaicDropData => {
+      if (mosaicId === item?.mosaicId) {
         return { path, position };
       } else {
         return {};

src/MosaicWindow.tsx

@@ -258,7 +258,7 @@ function ConnectedInternalMosaicWindow<T extends MosaicKey = string>(props: Inte
       // The defer is necessary as the element must be present on start for HTML DnD to not cry
       const hideTimer = defer(() => mosaicActions.hide(props.path));
       return {
-        mosaicId: mosaicId,
+        mosaicId,
         hideTimer,
       };
     },
@@ -296,12 +296,10 @@ function ConnectedInternalMosaicWindow<T extends MosaicKey = string>(props: Inte
 
   const [{ isOver, draggedMosaicId }, connectDropTarget] = useDrop({
     accept: MosaicDragType.WINDOW,
-    collect(monitor: DropTargetMonitor<MosaicDragItem>) {
-      return {
-        isOver: monitor.isOver(),
-        draggedMosaicId: (monitor.getItem() || {}).mosaicId,
-      };
-    },
+    collect: (monitor: DropTargetMonitor<MosaicDragItem>) => ({
+      isOver: monitor.isOver(),
+      draggedMosaicId: monitor.getItem()?.mosaicId,
+    }),
   });
   return (
     <InternalMosaicWindow

src/RootDropTargets.tsx

@@ -10,9 +10,9 @@ import { MosaicDragType } from './types';
 export const RootDropTargets = React.memo(() => {
   const [{ isDragging }] = useDrop({
     accept: MosaicDragType.WINDOW,
-    collect(monitor) {
-      return { isDragging: monitor.getItem() !== null && monitor.getItemType() === MosaicDragType.WINDOW };
-    },
+    collect: (monitor) => ({
+      isDragging: monitor.getItem() !== null && monitor.getItemType() === MosaicDragType.WINDOW,
+    }),
   });
   const delayedIsDragging = useDelayedTrue(isDragging, 0);
   return (

webpack/base.ts

@@ -2,14 +2,8 @@ import HtmlWebpackPlugin from 'html-webpack-plugin';
 import webpack from 'webpack';
 import { CONSTANTS } from './constants';
 
-// tslint:disable-next-line no-var-requires
-const VENDOR_LIBS = Object.keys(require('../package.json').dependencies);
-
 const config: webpack.Configuration = {
-  entry: {
-    app: CONSTANTS.APP_ENTRY,
-    vendor: VENDOR_LIBS,
-  },
+  entry: CONSTANTS.APP_ENTRY,
   output: {
     filename: '[name].js',
     path: CONSTANTS.DOCS_DIR,
@@ -19,7 +13,7 @@ const config: webpack.Configuration = {
     extensions: ['.webpack.js', '.web.js', '.json', '.ts', '.js', '.tsx'],
   },
   optimization: {
-    moduleIds: 'named'
+    moduleIds: 'named',
   },
   module: {
     rules: [
@@ -58,7 +52,7 @@ const config: webpack.Configuration = {
       },
       {
         test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.woff2?$|\.ttf$|\.eot$/,
-        loader: 'file-loader',
+        type: 'asset/resource',
       },
       {
         test: /\.less/,

webpack/bundle.ts

@@ -3,6 +3,7 @@ import config from './base';
 
 const bundleConfig: webpack.Configuration = {
   ...config,
+  mode: 'production',
   optimization: {
     ...config.optimization,
     minimize: true,

webpack/constants.ts

@@ -6,4 +6,5 @@ export const CONSTANTS = {
   HTML_TEMPLATE: path.join(__dirname, 'index-template.html'),
   DOCS_DIR: path.join(__dirname, '..', 'docs/'),
   DEV_SERVER_PORT: 8092,
+  PUBLIC_PATH: '/public/',
 };

webpack/hot.ts

@@ -1,51 +1,12 @@
+import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import webpack from 'webpack';
+import 'webpack-dev-server';
 import config from './base';
 import { CONSTANTS } from './constants';
-import 'webpack-dev-server';
-
-const baseEntry = config.entry as webpack.EntryObject;
-const entry = {
-  ...baseEntry,
-  app: [
-    // activate HMR for React
-    'react-hot-loader/patch',
-
-    // bundle the client for webpack-dev-server
-    // and connect to the provided endpoint
-    'webpack-dev-server/client?http://localhost:' + CONSTANTS.DEV_SERVER_PORT,
-
-    // bundle the client for hot reloading
-    // only- means to only hot reload for successful updates
-    'webpack/hot/only-dev-server',
-    baseEntry.app as string,
-  ],
-};
-
-const rules = (config.module as webpack.ModuleOptions).rules?.map((loaderConf: any) => {
-  if (loaderConf.test.test('test.ts')) {
-    return {
-      ...loaderConf,
-      use: [
-        {
-          loader: 'react-hot-loader/webpack',
-        },
-        ...loaderConf.use,
-      ],
-    };
-  } else {
-    return loaderConf;
-  }
-});
-const module = {
-  ...config.module,
-  rules,
-};
 
 const hotConfig: webpack.Configuration = {
   ...config,
   mode: 'development',
-  entry,
-  module,
   devtool: 'cheap-module-source-map',
   stats: 'minimal',
   optimization: {
@@ -57,8 +18,8 @@ const hotConfig: webpack.Configuration = {
     hot: true,
     host: '0.0.0.0',
     port: CONSTANTS.DEV_SERVER_PORT,
-    open: true,
   },
+  plugins: [...(config.plugins || []), new ReactRefreshWebpackPlugin()],
 };
 
 // tslint:disable-next-line no-default-export