Add ES Modules output, make BlueprintJS dependency explicit

.gitignore

@@ -1,10 +1,10 @@
 node_modules/
-lib/
-/react-mosaic-component.css*
+dist/
+
 .*.swp
 react-mosaic.tar.bz2
 npm-debug.log
 yarn-error.log
 
 **/.idea/*
-!**/.idea/*.iml
+!**/.idea/*.iml

package.json

@@ -1,11 +1,12 @@
 {
   "name": "react-mosaic-component",
-  "version": "4.1.1",
+  "version": "4.1.3",
   "description": "A React Tiling Window Manager",
   "license": "Apache-2.0",
-  "main": "lib/index.js",
-  "style": "lib/react-mosaic.css",
-  "typings": "lib/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "style": "dist/styles/theme.css",
+  "typings": "dist/esm/index.d.ts",
+  "module": "dist/esm/index.js",
   "sideEffects": [
     "*.css"
   ],
@@ -16,9 +17,10 @@
   "scripts": {
     "build": "npm-run-all clean -lp build:**",
     "build:ts": "tsc -p tsconfig-build.json",
-    "build:less": "lessc --autoprefix=defaults --source-map styles/index.less react-mosaic-component.css",
+    "build:ts-esm": "tsc -p tsconfig-esm-build.json",
+    "build:less": "lessc --autoprefix=defaults --source-map styles/index.less dist/styles/theme.css",
     "bundle": "rm -rf docs/ && webpack --config webpack/bundle.ts",
-    "clean": "rm -rf lib/",
+    "clean": "rm -rf dist/",
     "start": "webpack-dev-server --config webpack/hot.ts",
     "prettier:run": "prettier 'styles/*.less' '*.md' '{,.}*.yml' '.circleci/*.yml'",
     "test": "npm-run-all build -lp test:**",
@@ -31,60 +33,60 @@
     "version": "npm run bundle && git add -A docs/"
   },
   "devDependencies": {
-    "@blueprintjs/core": "^3.15.1",
-    "@blueprintjs/icons": "^3.9.0",
-    "@types/chai": "^4.1.7",
-    "@types/classnames": "^2.2.8",
+    "@blueprintjs/core": "^3.31.0",
+    "@blueprintjs/icons": "^3.20.1",
+    "@types/chai": "^4.2.12",
+    "@types/classnames": "^2.2.10",
     "@types/dom4": "^2.0.1",
-    "@types/html-webpack-plugin": "2.30.2",
-    "@types/lodash": "^4.14.134",
-    "@types/mocha": "^5.2.7",
-    "@types/prop-types": "^15.7.1",
-    "@types/react": "^16.9.35",
-    "@types/react-dnd-multi-backend": "^5.0.0",
+    "@types/html-webpack-plugin": "3.2.3",
+    "@types/lodash": "^4.14.160",
+    "@types/mocha": "^8.0.3",
+    "@types/prop-types": "^15.7.3",
+    "@types/react": "^16.9.48",
+    "@types/react-dnd-multi-backend": "^6.0.0",
     "@types/react-dom": "^16.9.8",
-    "@types/react-hot-loader": "^3.0.6",
-    "@types/uuid": "^3.4.4",
-    "@types/webpack": "^3.8.18",
+    "@types/react-hot-loader": "^4.1.1",
+    "@types/uuid": "^8.3.0",
+    "@types/webpack": "^4.41.21",
     "chai": "^4.2.0",
-    "css-loader": "^0.28.11",
-    "file-loader": "^1.1.11",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^2.30.1",
-    "jsdom": "^15.1.1",
+    "css-loader": "^4.2.2",
+    "file-loader": "^6.0.0",
+    "html-loader": "^1.3.0",
+    "html-webpack-plugin": "^4.3.0",
+    "jsdom": "^16.4.0",
     "jsdom-global": "^3.0.2",
-    "less": "^3.9.0",
-    "less-loader": "^5.0.0",
+    "less": "^3.12.2",
+    "less-loader": "^7.0.0",
     "less-plugin-autoprefix": "^2.0.0",
-    "mocha": "^7.1.0",
-    "mocha-junit-reporter": "^1.23.3",
+    "mocha": "^8.1.2",
+    "mocha-junit-reporter": "^2.0.0",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.0.5",
+    "prettier": "^2.1.1",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-hot-loader": "^3.1.3",
-    "source-map-loader": "^0.2.4",
-    "style-loader": "^0.20.2",
-    "ts-loader": "^3.5.0",
-    "ts-node": "^8.10.1",
-    "tslint": "^6.1.2",
+    "react-hot-loader": "^4.12.21",
+    "source-map-loader": "^1.0.2",
+    "style-loader": "^1.2.1",
+    "ts-loader": "^8.0.3",
+    "ts-node": "^9.0.0",
+    "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.18.0",
     "tslint-plugin-prettier": "^2.3.0",
     "tslint-react": "^5.0.0",
-    "typescript": "~3.9.3",
-    "webpack": "^3.12.0",
-    "webpack-dev-server": "^2.11.5"
+    "typescript": "~4.0.2",
+    "webpack": "^4.44.1",
+    "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
     "classnames": "^2.2.6",
-    "immutability-helper": "^3.0.1",
-    "lodash": "^4.17.11",
+    "immutability-helper": "^3.1.1",
+    "lodash": "^4.17.20",
     "prop-types": "^15.7.2",
     "react-dnd": "^10.0.2",
-    "react-dnd-html5-backend": "^10.0.2",
-    "react-dnd-multi-backend": "^5.0.0",
-    "react-dnd-touch-backend": "^10.0.2",
-    "uuid": "^3.3.2"
+    "react-dnd-html5-backend": "^11.1.3",
+    "react-dnd-multi-backend": "^6.0.2",
+    "react-dnd-touch-backend": "^11.1.3",
+    "uuid": "^8.3.0"
   },
   "peerDependencies": {
     "react": "^16.3.0"
@@ -97,4 +99,4 @@
     "tiling-window-manager",
     "window-manager"
   ]
-}
+}

src/util/OptionalBlueprint.tsx

@@ -1,38 +1,20 @@
-import { Classes as ClassesImport, IIconProps } from '@blueprintjs/core';
-import { IconNames as IconNamesTypeImport } from '@blueprintjs/icons';
+import { Classes as ClassesImport, Icon as IconImport } from '@blueprintjs/core';
+import { IconNames as IconNamesImport } from '@blueprintjs/icons';
 import * as React from 'react';
 
 export namespace OptionalBlueprint {
-  type Classes = typeof ClassesImport;
-  let Classes: Classes | undefined;
-  export let Icon: React.ReactType<IIconProps>;
-  type IconNames = typeof IconNamesTypeImport;
-  let IconNames: IconNames | undefined;
-  try {
-    // Webpack is quieter about these errors
-    // https://github.com/nomcopter/react-mosaic/issues/109
-    require.resolve('@blueprintjs/core');
-    require.resolve('@blueprintjs/icons');
-    ({ Classes, Icon } = require('@blueprintjs/core'));
-    ({ IconNames } = require('@blueprintjs/icons'));
-  } catch {
-    Icon = ({ icon }: IIconProps) => <span>{icon}</span>;
-  }
+  const Classes = ClassesImport;
+  const IconNames = IconNamesImport;
 
-  type BlueprintClass = { [K in keyof Classes]: Classes[K] extends string ? K : never }[keyof Classes];
-  export function getClasses(...names: BlueprintClass[]): string {
-    if (Classes) {
-      return names.map((name) => Classes![name]).join(' ');
-    }
+  export let Icon = IconImport;
 
-    return '';
+  type ClassName = keyof typeof Classes;
+  export function getClasses(...names: ClassName[]): string {
+    return names.map((name) => Classes[name]).join(' ');
   }
 
-  export function getIconClass(iconName: keyof IconNames): string {
-    if (Classes && IconNames) {
-      return Classes.iconClass(IconNames[iconName]);
-    }
-
-    return '';
+  type IconName = keyof typeof IconNamesImport;
+  export function getIconClass(iconName: IconName): string {
+    return Classes.iconClass(IconNames[iconName]);
   }
 }

tsconfig-build.json

@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib",
+    "outDir": "dist/cjs",
     "rootDir": "src"
   },
   "exclude": [

tsconfig-esm-build.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "noEmit": false,
+    "outDir": "dist/esm",
+    "rootDir": "src",
+    "target": "ES6",
+    "module": "ES6",
+    "moduleResolution": "node"
+  },
+  "exclude": ["demo", "docs", "lib", "node_modules", "test", "webpack"],
+  "extends": "./tsconfig.json"
+}