Improve Babel configuration and automatically load polyfills (#27333)

.env.test

@@ -1,5 +1,5 @@
-# Node.js
+# In test, compile the NodeJS code as if we are in production
-NODE_ENV=tests
+NODE_ENV=production
 # Federation
 LOCAL_DOMAIN=cb6e6126.ngrok.io
 LOCAL_HTTPS=true

app/javascript/mastodon/polyfills/base_polyfills.ts

@@ -1,30 +0,0 @@
-import 'core-js/features/object/assign';
-import 'core-js/features/object/values';
-import 'core-js/features/symbol';
-import 'core-js/features/promise/finally';
-import { decode as decodeBase64 } from '../utils/base64';
-
-if (!Object.hasOwn(HTMLCanvasElement.prototype, 'toBlob')) {
-  const BASE64_MARKER = ';base64,';
-
-  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
-    value: function (
-      this: HTMLCanvasElement,
-      callback: BlobCallback,
-      type = 'image/png',
-      quality: unknown,
-    ) {
-      const dataURL: string = this.toDataURL(type, quality);
-      let data;
-
-      if (dataURL.includes(BASE64_MARKER)) {
-        const [, base64] = dataURL.split(BASE64_MARKER);
-        data = decodeBase64(base64);
-      } else {
-        [, data] = dataURL.split(',');
-      }
-
-      callback(new Blob([data], { type }));
-    },
-  });
-}

app/javascript/mastodon/polyfills/extra_polyfills.ts

@@ -1,2 +1 @@
-import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only';
 import 'requestidlecallback';

app/javascript/mastodon/polyfills/index.ts

@@ -4,39 +4,18 @@
 
 import { loadIntlPolyfills } from './intl';
 
-function importBasePolyfills() {
-  return import(/* webpackChunkName: "base_polyfills" */ './base_polyfills');
-}
-
 function importExtraPolyfills() {
   return import(/* webpackChunkName: "extra_polyfills" */ './extra_polyfills');
 }
 
 export function loadPolyfills() {
-  const needsBasePolyfills = !(
+  // Safari does not have requestIdleCallback.
-    'toBlob' in HTMLCanvasElement.prototype &&
-    'assign' in Object &&
-    'values' in Object &&
-    'Symbol' in window &&
-    'finally' in Promise.prototype
-  );
-
-  // Latest version of Firefox and Safari do not have IntersectionObserver.
-  // Edge does not have requestIdleCallback.
   // This avoids shipping them all the polyfills.
-  /* eslint-disable @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types */
+  const needsExtraPolyfills = !window.requestIdleCallback;
-  const needsExtraPolyfills = !(
-    window.AbortController &&
-    window.IntersectionObserver &&
-    window.IntersectionObserverEntry &&
-    'isIntersecting' in IntersectionObserverEntry.prototype &&
-    window.requestIdleCallback
-  );
-  /* eslint-enable @typescript-eslint/no-unnecessary-condition */
 
   return Promise.all([
     loadIntlPolyfills(),
-    needsBasePolyfills && importBasePolyfills(),
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- those properties might not exist in old browsers, even if they are always here in types
     needsExtraPolyfills && importExtraPolyfills(),
   ]);
 }

babel.config.js

@@ -7,8 +7,8 @@ module.exports = (api) => {
   };
 
   const envOptions = {
-    loose: true,
+    useBuiltIns: "usage",
-    modules: false,
+    corejs: { version: "3.30" },
     debug: false,
     include: [
       'transform-numeric-separator',
@@ -18,29 +18,14 @@ module.exports = (api) => {
     ],
   };
 
-  const config = {
+  const plugins = [
-    presets: [
+    ['formatjs'],
-      '@babel/preset-typescript',
+    'preval',
-      ['@babel/react', reactOptions],
+  ];
-      ['@babel/env', envOptions],
-    ],
-    plugins: [
-      ['formatjs'],
-      'preval',
-    ],
-    overrides: [
-      {
-        test: /tesseract\.js/,
-        presets: [
-          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
-        ],
-      },
-    ],
-  };
 
   switch (env) {
   case 'production':
-    config.plugins.push(...[
+    plugins.push(...[
       'lodash',
       [
         'transform-react-remove-prop-types',
@@ -63,14 +48,29 @@ module.exports = (api) => {
       ],
     ]);
     break;
+
   case 'development':
     reactOptions.development = true;
     envOptions.debug = true;
     break;
-  case 'test':
-    envOptions.modules = 'commonjs';
-    break;
   }
 
+  const config = {
+    presets: [
+      '@babel/preset-typescript',
+      ['@babel/react', reactOptions],
+      ['@babel/env', envOptions],
+    ],
+    plugins,
+    overrides: [
+      {
+        test: /tesseract\.js/,
+        presets: [
+          ['@babel/env', { ...envOptions, modules: 'commonjs' }],
+        ],
+      },
+    ],
+  };
+
   return config;
 };

config/webpack/rules/index.js

@@ -2,7 +2,6 @@ const babel = require('./babel');
 const css = require('./css');
 const file = require('./file');
 const materialIcons = require('./material_icons');
-const nodeModules = require('./node_modules');
 const tesseract = require('./tesseract');
 
 // Webpack loaders are processed in reverse order
@@ -13,6 +12,5 @@ module.exports = {
   file,
   tesseract,
   css,
-  nodeModules,
   babel,
 };

config/webpack/rules/node_modules.js

@@ -1,27 +0,0 @@
-const { join } = require('path');
-
-const { settings, env } = require('../configuration');
-
-module.exports = {
-  test: /\.(js|mjs)$/,
-  include: /node_modules/,
-  exclude: [
-    /@babel(?:\/|\\{1,2})runtime/,
-    /tesseract.js/,
-  ],
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        babelrc: false,
-        plugins: [
-          'transform-react-remove-prop-types',
-        ],
-        cacheDirectory: join(settings.cache_path, 'babel-loader-node-modules'),
-        cacheCompression: env.NODE_ENV === 'production',
-        compact: false,
-        sourceMaps: false,
-      },
-    },
-  ],
-};

config/webpack/tests.js

@@ -1,9 +0,0 @@
-// Note: You must restart bin/webpack-dev-server for changes to take effect
-
-const { merge } = require('webpack-merge');
-
-const sharedConfig = require('./shared');
-
-module.exports = merge(sharedConfig, {
-  mode: 'production',
-});

package.json

@@ -49,7 +49,6 @@
     "@reduxjs/toolkit": "^1.9.5",
     "@renchap/compression-webpack-plugin": "^6.1.4",
     "@svgr/webpack": "^5.5.0",
-    "abortcontroller-polyfill": "^1.7.5",
     "arrow-key-navigation": "^1.2.0",
     "async-mutex": "^0.4.0",
     "autoprefixer": "^10.4.14",

yarn.lock

@@ -2904,11 +2904,6 @@ abort-controller@^3.0.0:
   dependencies:
     event-target-shim "^5.0.0"
 
-abortcontroller-polyfill@^1.7.5:
-  version "1.7.5"
-  resolved "https://registry.yarnpkg.com/abortcontroller-polyfill/-/abortcontroller-polyfill-1.7.5.tgz#6738495f4e901fbb57b6c0611d0c75f76c485bed"
-  integrity sha512-JMJ5soJWP18htbbxJjG7bG6yuI6pRhgJ0scHHTfkUjf6wjP912xZWvM+A4sJK3gqd9E8fcPbDnOefbA9Th/FIQ==
-
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
   resolved "https://registry.yarnpkg.com/accepts/-/accepts-1.3.8.tgz#0bf0be125b67014adcb0b0921e62db7bffe16b2e"