chore(web): add a watch + sync script (mongodb-js#5769)

* chore(web): add a watch + sync script

* chore(web): add "use strict"

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

---------

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

packages/compass-web/package.json

@@ -26,19 +26,24 @@
   "main": "dist/index.js",
   "compass:main": "src/index.tsx",
   "exports": {
-    ".": "./dist/index.js"
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
   },
   "compass:exports": {
-    ".": "./src/index.tsx"
+    ".": "./src/index.tsx",
+    "./package.json": "./package.json"
   },
   "types": "./dist/index.d.ts",
   "scripts": {
     "prepublishOnly": "npm run compile && compass-scripts check-exports-exist",
     "compile": "npm run webpack -- --mode production",
     "webpack": "webpack-compass",
-    "postcompile": "tsc -p tsconfig-build.json --emitDeclarationOnly",
+    "postcompile": "npm run typescript",
+    "typescript": "tsc -p tsconfig-build.json --emitDeclarationOnly",
     "start": "npm run webpack serve -- --mode development",
     "analyze": "npm run webpack -- --mode production --analyze",
+    "watch": "npm run webpack -- --mode development --watch",
+    "sync": "node scripts/sync-dist-to-mms.js",
     "typecheck": "tsc -p tsconfig-lint.json --noEmit",
     "eslint": "eslint",
     "prettier": "prettier",
@@ -107,6 +112,7 @@
     "express-http-proxy": "^2.0.0",
     "hadron-app-registry": "^9.1.10",
     "is-ip": "^5.0.1",
+    "lodash": "^4.17.21",
     "mocha": "^10.2.0",
     "mongodb": "^6.5.0",
     "mongodb-connection-string-url": "^2.6.0",

packages/compass-web/scripts/sync-dist-to-mms.js

@@ -0,0 +1,70 @@
+'use strict';
+const fs = require('fs');
+const path = require('path');
+const child_process = require('child_process');
+const os = require('os');
+const { debounce } = require('lodash');
+
+if (!process.env.MMS_HOME) {
+  throw new Error(
+    'Missing required environment variable $MMS_HOME. Make sure you finished the "Cloud Developer Setup" process'
+  );
+}
+
+const srcDir = path.resolve(__dirname, '..', 'dist');
+
+const destDir = path.dirname(
+  child_process.execFileSync(
+    'node',
+    ['-e', "console.log(require.resolve('@mongodb-js/compass-web'))"],
+    { cwd: process.env.MMS_HOME, encoding: 'utf-8' }
+  )
+);
+
+const tmpDir = path.join(
+  os.tmpdir(),
+  `mongodb-js--compass-web-${Date.now().toString(36)}`
+);
+
+fs.mkdirSync(srcDir, { recursive: true });
+
+// Create a copy of current dist that will be overriden by link, we'll restore
+// it when we are done
+fs.mkdirSync(tmpDir, { recursive: true });
+fs.cpSync(destDir, tmpDir, { recursive: true });
+
+const copyDist = debounce(
+  function () {
+    fs.cpSync(srcDir, destDir, { recursive: true });
+  },
+  1_000,
+  {
+    leading: true,
+    trailing: true,
+  }
+);
+
+// The existing approach of using `npm / pnpm link` commands doesn't play well
+// with webpack that will start to resolve other modules relative to the imports
+// from compass-web inevitably causing some modules to resolve from the compass
+// monorepo instead of mms one. To work around that we are just watching for any
+// file changes in the dist folder and copying them as-is to whatever place
+// compass-web was installed in mms node_modules
+const distWatcher = fs.watch(srcDir, function () {
+  copyDist();
+});
+
+const webpackWatchProcess = child_process.spawn('npm', ['run', 'watch'], {
+  stdio: 'inherit',
+});
+
+function cleanup(signalName) {
+  distWatcher.close();
+  webpackWatchProcess.kill(signalName);
+  fs.cpSync(tmpDir, destDir, { recursive: true });
+  fs.rmSync(tmpDir, { recursive: true, force: true });
+}
+
+for (const evt of ['SIGINT', 'SIGTERM']) {
+  process.on(evt, cleanup);
+}

packages/compass-web/webpack.config.js

@@ -8,6 +8,10 @@ const {
 } = require('@mongodb-js/webpack-config-compass');
 const { startElectronProxy } = require('./scripts/start-electron-proxy');
 const { createWebSocketProxy } = require('./scripts/ws-proxy');
+const { execFile } = require('child_process');
+const { promisify } = require('util');
+
+const execFileAsync = promisify(execFile);
 
 function localPolyfill(name) {
   return path.resolve(__dirname, 'polyfills', ...name.split('/'), 'index.ts');
@@ -192,6 +196,24 @@ module.exports = async (env, args) => {
       new webpack.DefinePlugin({
         'process.env.NODE_ENV': JSON.stringify('production'),
       }),
+
+      // Only applied when running webpack in --watch mode. In this mode we want
+      // to constantly rebuild d.ts files when source changes, we also don't
+      // want to fail and stop compilation if we failed to generate definitions
+      // for whatever reason, we only print the error
+      function (compiler) {
+        compiler.hooks.watchRun.tapPromise('compile-ts', async function () {
+          const logger = compiler.getInfrastructureLogger('compile-ts');
+          try {
+            await execFileAsync('npm', ['run', 'typescript']);
+            logger.log('Compiled TypeScript definitions successfully');
+          } catch (err) {
+            logger.error('Failed to complie TypeScript definitions:');
+            logger.error();
+            logger.error(err.stdout);
+          }
+        });
+      },
     ],
   });
 };