feat(webpack): introduce experimental esbuild transpilation

packages/webpack/mixins/build/mixin.core.js

@@ -127,6 +127,11 @@ class WebpackBuildMixin extends Mixin {
             describe: 'Run webpack builds in parallel',
             type: 'boolean',
           },
+          experimentalEsbuild: {
+            default: false,
+            describe: 'Use esbuild for transpilation (experimental)',
+            type: 'boolean',
+          },
         },
         handler: (argv) =>
           Promise.resolve(argv.clean && this.clean())

packages/webpack/mixins/esbuild/importComponentTransform.js

@@ -0,0 +1,10 @@
+const regex = /importComponent\s*\(\s*\(\)\s+=>\s+import\(\s*'([^']+)'\s*\)\s*\)/g;
+
+function transformImportComponent(source) {
+  return source.replace(
+    regex,
+    "importComponent({ load: () => import('$1'), moduleId: require.resolveWeak('$1') })"
+  );
+}
+
+module.exports = transformImportComponent;

packages/webpack/mixins/esbuild/mixin.core.js

@@ -0,0 +1,85 @@
+const { Mixin } = require('hops-mixin');
+const importComponentTransform = require.resolve(
+  './importComponentTransform.js'
+);
+
+const isLoaderFor = (file) => (test) => {
+  if (Array.isArray(test)) {
+    return test.some(isLoaderFor(file));
+  } else if (typeof test === 'object' && typeof test.test === 'function') {
+    return test.test(file);
+  } else {
+    return false;
+  }
+};
+const isTsLoader = isLoaderFor('test.ts');
+const isJsLoader = isLoaderFor('test.js');
+
+class HopsEsbuildMixin extends Mixin {
+  configureBuild({ optimization, plugins }, { allLoaderConfigs }, target) {
+    const { experimentalEsbuild } = this.options;
+
+    if (!experimentalEsbuild) {
+      return;
+    }
+
+    const esbuildTarget = target === 'node' ? 'node12' : 'es2015';
+    // NOTE: We don't want to ship esbuild, so we just assume it is installed
+    // when someone wants to use it.
+    // eslint-disable-next-line node/no-missing-require
+    const { ESBuildPlugin, ESBuildMinifyPlugin } = require('esbuild-loader');
+
+    // NOTE: We iterate all configs as we want to replace the entry instead of
+    // mutating the object, otherwise we would need to explicitly remove all
+    // other properties on the config object that are not related to esbuild.
+    for (let index = 0; index < allLoaderConfigs.length; index++) {
+      const { test, include, exclude } = allLoaderConfigs[index];
+      const esbuildLoader = isTsLoader(test)
+        ? 'tsx'
+        : isJsLoader(test)
+        ? 'jsx'
+        : null;
+
+      if (esbuildLoader) {
+        allLoaderConfigs[index] = {
+          test,
+          include,
+          exclude,
+          use: [
+            {
+              loader: 'esbuild-loader',
+              options: {
+                loader: esbuildLoader,
+                target: esbuildTarget,
+              },
+            },
+            importComponentTransform,
+          ],
+        };
+      }
+    }
+
+    // NOTE: We don't decide here whether to minify or not but instead just
+    // override it if someone else has already configured it.
+    if (
+      Array.isArray(optimization.minimizer) &&
+      optimization.minimizer.length > 0
+    ) {
+      optimization.minimizer = [
+        new ESBuildMinifyPlugin({
+          target: esbuildTarget,
+          minify: true,
+          sourcemap: true,
+        }),
+      ];
+    }
+
+    plugins.push(new ESBuildPlugin());
+  }
+
+  handleArguments(argv) {
+    this.options = { ...this.options, ...argv };
+  }
+}
+
+module.exports = HopsEsbuildMixin;

packages/webpack/mixins/start/mixin.core.js

@@ -27,6 +27,11 @@ class WebpackStartMixin extends Mixin {
               'Experimental: Enable faster development mode (modern browsers only)',
             type: 'boolean',
           },
+          experimentalEsbuild: {
+            default: false,
+            describe: 'Use esbuild for transpilation (experimental)',
+            type: 'boolean',
+          },
         },
         handler: (argv) => {
           if (process.env.NODE_ENV === 'production') {

packages/webpack/preset.js

@@ -20,6 +20,7 @@ module.exports = {
     join(__dirname, 'mixins', 'start'),
     join(__dirname, 'mixins', 'stats'),
     join(__dirname, 'mixins', 'optimizations'),
+    join(__dirname, 'mixins', 'esbuild'),
   ],
   mixinTypes: {
     browser: {