chore(web): add a local polyfill for tr46; add bundle size checks

Author: gribnoysup

packages/compass-web/.mocharc.js

@@ -1,2 +1,7 @@
 'use strict';
-module.exports = require('@mongodb-js/mocha-config-compass/compass-plugin');
+const config = require('@mongodb-js/mocha-config-compass/compass-plugin');
+
+module.exports = {
+  ...config,
+  spec: [...config.spec, 'polyfills/**/*.spec.*', 'polyfills/**/*.test.*'],
+};

packages/compass-web/polyfills/tr46/index.spec.ts

@@ -0,0 +1,27 @@
+import { expect } from 'chai';
+import { toASCII } from './index';
+
+// Keep in sync with https://github.com/jsdom/tr46/blob/main/scripts/getLatestTests.js when updating whatwg-url
+const wptSHA = '72b915d4b3754f081ef5899bf6a777efe71b2fc5';
+
+describe('tr46 polyfill', function () {
+  describe('toASCII', function () {
+    let tests: { input: string; output: string }[] = [];
+
+    before(async function () {
+      tests = await fetch(
+        `https://raw.githubusercontent.com/web-platform-tests/wpt/${wptSHA}/url/resources/toascii.json`
+      ).then((res) => res.json());
+    });
+
+    it('should pass wpt specs', function () {
+      for (const test of tests) {
+        // String items are just comments in the test data
+        if (typeof test === 'string') {
+          return;
+        }
+        expect(toASCII(test.input)).to.eq(test.output);
+      }
+    });
+  });
+});

packages/compass-web/polyfills/tr46/index.ts

@@ -0,0 +1,17 @@
+/**
+ * This is a dependency of whatwg-url package, we can't fully replace it with
+ * the globalThis.URL due to subtle differences in packages behavior, but we can
+ * substitue one of the biggest chunks of the package (tr46) with a browser
+ * implementation.
+ */
+export function toASCII(domain: string) {
+  try {
+    return new window.URL(`http://${domain}`).hostname;
+  } catch {
+    return null;
+  }
+}
+
+export function toUnicode() {
+  throw new Error('Not implemented');
+}

packages/compass-web/webpack.config.js

@@ -15,6 +15,13 @@ function localPolyfill(name) {
   return path.resolve(__dirname, 'polyfills', ...name.split('/'), 'index.ts');
 }
 
+/**
+ * Atlas Cloud uses in-flight compression that doesn't compress anything that is
+ * bigger than 10MB, we want to make sure that compass-web assets stay under the
+ * limit so that they are compressed when served
+ */
+const MAX_COMPRESSION_FILE_SIZE = 10_000_000;
+
 module.exports = (env, args) => {
   const serve = isServe({ env });
 
@@ -28,7 +35,6 @@ module.exports = (env, args) => {
 
   config = merge(config, {
     context: __dirname,
-
     resolve: {
       alias: {
         // Dependencies for the unsupported connection types in data-service
@@ -90,12 +96,13 @@ module.exports = (env, args) => {
         vm: require.resolve('vm-browserify'),
 
         // TODO(NODE-5408): requires a polyfill to be able to parse connection
-        // string correctly at the moment, but we should also omit some
-        // depdendencies that might not be required for this to work in the
-        // browser
+        // string correctly at the moment
         url: require.resolve('whatwg-url'),
         // Make sure we're not getting multiple versions included
         'whatwg-url': require.resolve('whatwg-url'),
+        // Heavy dependency of whatwg-url that we can replace in the browser
+        // environment
+        tr46: localPolyfill('tr46'),
 
         // Polyfills that are required for the driver to function in browser
         // environment
@@ -140,6 +147,11 @@ module.exports = (env, args) => {
         process: [localPolyfill('process'), 'process'],
       }),
     ],
+    performance: {
+      hints: serve ? 'warning' : 'error',
+      maxEntrypointSize: MAX_COMPRESSION_FILE_SIZE,
+      maxAssetSize: MAX_COMPRESSION_FILE_SIZE,
+    },
   });
 
   if (serve) {