Merge pull request #204 from nomcopter/continue-dependency-update

Continue dependency update

Author: nomcopter

.mocharc.js

@@ -0,0 +1,13 @@
+require('jsdom-global/register');
+require('ts-node').register({
+  transpileOnly: true,
+});
+
+const mock = require('mock-require');
+mock('rdndmb-html5-to-touch', {});
+mock('react-dnd', {});
+mock('react-dnd-multi-backend', {});
+
+module.exports = {
+  spec: 'test/*.ts',
+};

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

@@ -5,6 +5,7 @@
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "style": "lib/react-mosaic.css",
+  "type": "commonjs",
   "typings": "lib/index.d.ts",
   "repository": {
     "type": "git",
@@ -32,15 +33,15 @@
     "prettier:run": "prettier 'styles/*.less' '*.md' '{,.}*.yml' '.circleci/*.yml'",
     "test": "npm-run-all build -lp test:**",
     "test:lint": "tslint -c tslint.yml -p tsconfig.json -e test",
-    "test:unit": "mocha --opts test/mocha.opts 'test/*.ts'",
+    "test:unit": "mocha",
     "test:format": "yarn run prettier:run --list-different",
     "fix": "npm-run-all -lp fix:**",
     "fix:format": "yarn run prettier:run --write",
     "fix:lint": "yarn run test:lint --fix",
     "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,50 +53,50 @@
     "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",
     "jsdom-global": "^3.0.2",
     "less": "^3.13.1",
     "less-loader": "^11.1.0",
     "less-plugin-autoprefix": "^2.0.0",
-    "mocha": "^7.2.0",
+    "mocha": "^6.2.3",
     "mocha-junit-reporter": "^1.23.3",
+    "mock-require": "^3.0.3",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.6.1",
+    "prettier": "^2.8.4",
     "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",
-    "ts-node": "^8.10.2",
+    "ts-node": "^10.9.1",
     "tslint": "^6.1.3",
     "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 (

src/Split.tsx

@@ -109,7 +109,6 @@ export class Split extends React.PureComponent<SplitProps> {
 
   private onMouseMove = (event: MouseEvent | TouchEvent) => {
     event.preventDefault();
-    event.stopPropagation();
 
     this.throttledUpdatePercentage(event);
   };

src/util/OptionalBlueprint.tsx

@@ -24,7 +24,7 @@ export namespace OptionalBlueprint {
   };
 
   type BlueprintClass = {
-    [K in keyof typeof Classes]: typeof Classes[K] extends string ? K : never;
+    [K in keyof typeof Classes]: (typeof Classes)[K] extends string ? K : never;
   }[keyof typeof Classes];
 
   export function getClasses(blueprintNamespace: string, ...names: BlueprintClass[]): string {

test/mocha.opts

@@ -7,6 +7,8 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["dom", "es5", "scripthost", "es2015.promise"],
+    "moduleResolution": "node",
+    "module": "commonjs",
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,
     "noImplicitReturns": true,
@@ -17,9 +19,5 @@
     "sourceMap": true,
     "strict": true
   },
-  "exclude": [
-    "docs",
-    "lib",
-    "node_modules"
-  ]
+  "exclude": ["docs", "lib", "node_modules"],
 }

test/registerTsNode.js

@@ -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/,

tsconfig.json

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

webpack/base.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/bundle.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