build: Introduce shared webpack config; Use webpack to build compass C…

…OMPASS-4776 (#2454)

* feat(scripts): Support configs in create-workspace; Fix total counter

* feat(@mongodb-js/webpack-config-compass): Add new shared webpack configuration for Compass and plugins

* build(mongodb-compass): Use webpack-config-compass to bundle application source instead of hadron-compile-cache, hadron-module-cache, hadron-style-manager

* feat(@mongodb-js/hadron-plugin-manager): Make plugin manager compatible with webpack; Simplify plugin resolution logic

All plugins in pluginList are now always resolved using node_modules
resolution logic, no fallbacks to relative paths

* build(@mongodb-js/compass-serverstats): Refactor serverstats plugin to use new webpack config

* chore: Remove all unused styles/index.less files

They were needed while compass was using style-manager, but can be
safely removed now, most of them were just empty files

* chore(hadron-build): Remove all release steps that are handled by webpack now

* chore: Remove unused and archived hadron-style-manager, hadron-compile-cache, and hadron-module-cache packages from the monorepo

* chore: Update package-lock

* fix(hadron-plugin-manager): Fix depcheck error

* fix(hadron-build): Ignore failed meta resolution if it happened for the dev or optional dep

* chore(mongodb-compass): Simplify `electronBinary` declaration

Co-authored-by: Anna Henningsen <[email protected]>

* fix(mongodb-compass): Set charset to utf-8 on Compass html pages

* fix(mongodb-compass, @mongodb-js/compass-serverstats): Use `pathToFileURL` so that filepaths are always properly encoded

Co-authored-by: Anna Henningsen <[email protected]>

* fix(mongodb-compass, hadron-build, compass-e2e-tests): Run webpack with hadron-build for consistency; Ease propType check on the Stage component

* fix(@mongodb-js/webpack-config-compass): Ignore eslint warning

* fix(hadron-build): Fix eslint errors

* fix(compass-e2e-tests): Fix prettier formatting

* feat(@mongodb-js/mocha-config-compass): Add support for mocha-electron and a special compass plugin configuration

* chore(@mongodb-js/webpack-config-compass): Update dependencies

* chore(compass-serverstats): Refactor plugin to use new mocha test setup

* chore: UPdare package-lock and ignore more webpack dependencies (for now)

* fix(mongodb-compass): Allow self in img src content security policy

This is needed so in dev/serve mode images can be loaded, it's also safe to do for prod

* fix(webpack-config-compass): Always provide a library output for a renderer plugin build

Co-authored-by: Anna Henningsen <[email protected]>
Co-authored-by: Anna Henningsen <[email protected]>

.depalignrc.json

@@ -216,6 +216,21 @@
       "^4.0.4",
       "^4.0.1"
     ],
+    "webpack": [
+      "^5.52.1"
+    ],
+    "webpack-cli": [
+      "^4.8.0"
+    ],
+    "webpack-merge": [
+      "^5.8.0"
+    ],
+    "html-webpack-plugin": [
+      "^5.3.2"
+    ],
+    "webpack-dev-server": [
+      "^4.2.1"
+    ],
     "webpack-bundle-analyzer": [
       "^2.9.0",
       "^3.0.3",
@@ -263,6 +278,18 @@
       "^2.1.4",
       "^3.3.1",
       "^3.5.0"
+    ],
+    "style-loader": [
+      "^3.2.1"
+    ],
+    "postcss-loader": [
+      "^6.1.1"
+    ],
+    "node-loader": [
+      "^2.0.0"
+    ],
+    "less-loader": [
+      "^10.0.1"
     ]
   }
 }

.depcheckrc

@@ -0,0 +1,3 @@
+ignores:
+  # TODO: See package.json. Remove when all packages using the same webpack version
+  - '@webpack-cli/serve'

README.md

@@ -56,15 +56,12 @@ This repository contains the source code and build tooling used in [MongoDB Comp
 - [**hadron-app-registry**](packages/hadron-app-registry): Hadron App Registry
 - [**hadron-auto-update-manager**](packages/hadron-auto-update-manager): Atoms AutoUpdateManager class as a standalone module.
 - [**hadron-build**](packages/hadron-build): Tooling for Hadron apps.
-- [**hadron-compile-cache**](packages/hadron-compile-cache): Hadron Compile Cache
 - [**hadron-document**](packages/hadron-document): Hadron Document
 - [**hadron-ipc**](packages/hadron-ipc): Simplified IPC for electron apps.
-- [**hadron-module-cache**](packages/module-cache): Hadron Module Cache
 - [**hadron-react-bson**](packages/hadron-react-bson): Hadron React BSON Components
 - [**hadron-react-buttons**](packages/hadron-react-buttons): Hadron React Button Components
 - [**hadron-react-components**](packages/hadron-react-components): Hadron React Components
 - [**hadron-reflux-store**](packages/reflux-store): Hadron Reflux Stores
-- [**hadron-style-manager**](packages/hadron-style-manager): Hadron Style Manager
 - [**hadron-type-checker**](packages/hadron-type-checker): Hadron Type Checker
 - [**mongodb-ace-mode**](packages/ace-mode): MongoDB Mode for the ACE Editor
 - [**mongodb-ace-theme**](packages/ace-theme): MongoDB Theme for the ACE Editor

configs/mocha-config-compass/compass-plugin.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  ...require('./react'),
+  // electron-mocha config options (ignored when run with just mocha)
+  // https://github.com/jprichardson/electron-mocha
+  renderer: true,
+  windowConfig: path.resolve(__dirname, 'window-config.json'),
+};

configs/mocha-config-compass/index.js

@@ -4,9 +4,9 @@ module.exports = {
   colors: true,
   timeout: 15000,
   require: [
-    path.resolve(__dirname, 'tsnode-register.js'),
-    path.resolve(__dirname, 'sinon-chai-register.js'),
+    path.resolve(__dirname, 'register', 'tsnode-register.js'),
+    path.resolve(__dirname, 'register', 'sinon-chai-register.js'),
   ],
-  spec: 'src/**/*.spec.*',
-  watchFiles: 'src/**/*',
+  spec: '{src,test}/**/*.{spec,test}.*',
+  watchFiles: '{src,test}/**/*',
 };

configs/mocha-config-compass/package.json

@@ -26,6 +26,10 @@
   "dependencies": {
     "chai": "^4.3.4",
     "chai-dom": "^1.9.0",
+    "chai-enzyme": "^1.0.0-beta.1",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.6",
+    "identity-obj-proxy": "^3.0.0",
     "jsdom-global": "^3.0.2",
     "sinon-chai": "^3.7.0",
     "ts-node": "^10.2.1"

configs/mocha-config-compass/react.js

@@ -1,10 +1,21 @@
 const path = require('path');
-const base = require('./');
+const base = require('.');
+
+const pkgJson = require(path.join(process.cwd(), 'package.json'));
+
+const isEnzyme = !!pkgJson.devDependencies.enzyme;
 
 module.exports = {
   ...base,
-  require: base.require.concat([
-    'jsdom-global/register',
-    path.resolve(__dirname, 'chai-dom-register.js'),
-  ]),
+  require: base.require.concat(
+    [
+      path.resolve(__dirname, 'register', 'jsdom-global-register.js'),
+      path.resolve(__dirname, 'register', 'chai-dom-register.js'),
+      path.resolve(__dirname, 'register', 'css-import-register.js'),
+      // We want to move new components/plugins to use testing-library, but for
+      // compat reasons will register and activate enzyme with adapters if
+      // plugin is using it
+      isEnzyme && path.resolve(__dirname, 'register', 'enzyme-register.js'),
+    ].filter(Boolean)
+  ),
 };

configs/mocha-config-compass/register/css-import-register.js

@@ -0,0 +1,8 @@
+const identityObjProxy = require('identity-obj-proxy');
+
+const identityProxyExports = (module) => {
+  module.exports = identityObjProxy;
+};
+
+require.extensions['.css'] = identityProxyExports;
+require.extensions['.less'] = identityProxyExports;

configs/mocha-config-compass/register/enzyme-register.js

@@ -0,0 +1,7 @@
+const chai = require('chai');
+const Enzyme = require('enzyme');
+const Adapter = require('enzyme-adapter-react-16');
+
+Enzyme.configure({ adapter: new Adapter() });
+
+chai.use(require('chai-enzyme')());

configs/mocha-config-compass/register/jsdom-global-register.js

@@ -0,0 +1,3 @@
+if (typeof window === 'undefined') {
+  require('jsdom-global/register');
+}

configs/mocha-config-compass/register/tsnode-register.js

@@ -0,0 +1,8 @@
+require('ts-node').register({
+  files: true,
+  transpileOnly: true,
+  compilerOptions: {
+    allowJs: true,
+    jsx: 'react',
+  },
+});

configs/mocha-config-compass/window-config.json

@@ -0,0 +1,7 @@
+{
+  "webPreferences": {
+    "subpixel-font-scaling": true,
+    "direct-write": true,
+    "nodeIntegration": true
+  }
+}

configs/webpack-config-compass/.depcheckrc

@@ -0,0 +1,14 @@
+ignores:
+  - '@mongodb-js/prettier-config-compass'
+  - '@mongodb-js/tsconfig-compass'
+  - '@types/chai'
+  - '@types/sinon-chai'
+  - 'sinon'
+  # peerdep
+  - 'core-js'
+  # peerdep
+  - 'postcss'
+  # used implicitly by the bin/webpack file
+  - 'webpack-cli'
+  # recursive
+  - 'mongodb-compass'

configs/webpack-config-compass/.eslintignore

@@ -0,0 +1,2 @@
+.nyc-output
+dist

configs/webpack-config-compass/.eslintrc.js

@@ -0,0 +1,8 @@
+module.exports = {
+  root: true,
+  extends: ['@mongodb-js/eslint-config-compass'],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig-lint.json'],
+  },
+};

configs/webpack-config-compass/.prettierignore

@@ -0,0 +1,2 @@
+.nyc-output
+dist

configs/webpack-config-compass/.prettierrc.json

@@ -0,0 +1 @@
+"@mongodb-js/prettier-config-compass"

configs/webpack-config-compass/bin/webpack.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+// XXX: This mimics (simplified) webpack behavior, but makes sure that we are
+// always resolving webpack-cli relative to the config. It is required to do, to
+// avoid hoisting issues that can try to start e.g., webpack-dev-server with
+// an unsupported version due to some webpack deps being hoisted and some not
+// (also allows other packages to avoid depending on those)
+//
+// This can be removed immediately after we are done moving other plugins to the
+// new webpack configuration.
+const path = require('path');
+process.env.WEBPACK_CLI_SKIP_IMPORT_LOCAL = true;
+// TODO: This doesn't work until https://github.com/webpack/webpack-cli/pull/2907 is published
+// process.env.WEBPACK_PACKAGE = path.dirname(
+//   require.resolve('webpack/package.json')
+// );
+// process.env.WEBPACK_DEV_SERVER_PACKAGE = path.dirname(
+//   require.resolve('webpack-dev-server/package.json')
+// );
+const pkgPath = require.resolve(`webpack-cli/package.json`);
+const pkg = require(pkgPath);
+require(path.resolve(path.dirname(pkgPath), pkg.bin['webpack-cli']));

configs/webpack-config-compass/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@mongodb-js/webpack-config-compass",
+  "description": "Shared webpack configuration for Compass application and plugins",
+  "author": {
+    "name": "MongoDB Inc",
+    "email": "[email protected]"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/COMPASS/issues",
+    "email": "[email protected]"
+  },
+  "homepage": "https://github.com/mongodb-js/compass",
+  "version": "0.1.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb-js/compass.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "license": "SSPL",
+  "main": "dist/index.js",
+  "bin": {
+    "webpack-compass": "./bin/webpack.js"
+  },
+  "exports": {
+    "require": "./dist/index.js",
+    "import": "./dist/.esm-wrapper.mjs"
+  },
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "bootstrap": "npm run compile",
+    "prepublishOnly": "npm run compile",
+    "compile": "tsc -p tsconfig.json",
+    "postcompile": "gen-esm-wrapper . ./dist/.esm-wrapper.mjs",
+    "eslint": "eslint",
+    "prettier": "prettier",
+    "lint": "npm run eslint . && npm run prettier -- --check .",
+    "depcheck": "depcheck",
+    "check": "npm run lint && npm run depcheck",
+    "check-ci": "npm run check",
+    "reformat": "npm run prettier -- --write ."
+  },
+  "devDependencies": {
+    "@mongodb-js/eslint-config-compass": "^0.3.0",
+    "@mongodb-js/prettier-config-compass": "^0.2.0",
+    "@mongodb-js/tsconfig-compass": "^0.2.0",
+    "@types/html-webpack-plugin": "^3.2.6",
+    "depcheck": "^1.4.1",
+    "eslint": "^7.25.0",
+    "prettier": "2.3.2",
+    "typescript": "^4.3.5"
+  },
+  "dependencies": {
+    "@babel/core": "^7.15.5",
+    "@babel/plugin-proposal-decorators": "^7.15.4",
+    "@babel/preset-env": "^7.15.6",
+    "@babel/preset-react": "^7.14.5",
+    "@babel/preset-typescript": "^7.15.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0",
+    "babel-loader": "^8.2.2",
+    "core-js": "^3.17.3",
+    "css-loader": "^4.3.0",
+    "electron": "6.1.12",
+    "html-webpack-plugin": "^5.3.2",
+    "less-loader": "^10.0.1",
+    "node-loader": "^2.0.0",
+    "postcss": "^8.3.6",
+    "postcss-loader": "^6.1.1",
+    "postcss-preset-env": "^6.7.0",
+    "react-refresh": "^0.10.0",
+    "style-loader": "^3.2.1",
+    "webpack": "^5.52.1",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1",
+    "webpack-merge": "^5.8.0"
+  }
+}