refactor: use babel in importComponent webpack loader

In case the `--experimental-esbuild` mode is used, we have a small
webpack loader to handle the `importComponent` transformation.
This had been introduced in #1632 to be a quick & dirty regex based
replacer.
With this commit we now have a webpack loader that has a fast-exit
path in case `importComponent` is not used. Otherwise it will transpile
the source code using the proper babel plugin.

Co-authored-by: Markus Wolf <markus.wolf@new-work.se>
Co-authored-by: Philipp Hinrichsen <philipp.hinrichsen@new-work.se>
Co-authored-by: Robert Kowalski <robert.kowalski@new-work.se>

packages/jest-preset/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.8.3",
     "@babel/plugin-transform-flow-strip-types": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-react": "^7.9.4",

packages/jest-preset/transforms/esbuild.js

@@ -1,17 +1,27 @@
 // eslint-disable-next-line node/no-extraneous-require
 const { createTransformer } = require('esbuild-jest');
+const { transformSync } = require('@babel/core');
 
 const transformer = createTransformer({
   sourcemap: true,
 });
 
+const regex = /importComponent/g;
+
 module.exports = {
   process(content, filename, config, opts) {
-    content = content.replace(
-      /importComponent\s*\(\s*\(\)\s+=>\s+import\(\s*'([^']+)'\s*\)\s*\)/g,
-      "importComponent({ component: require('$1') })"
-    );
+    if (!regex.test(content)) {
+      return transformer.process(content, filename, config, opts);
+    }
+
+    const result = transformSync(content, {
+      plugins: [
+        require.resolve('../helpers/babel-plugin-import-component'),
+        require.resolve('@babel/plugin-syntax-jsx'),
+      ],
+      filename,
+    });
 
-    return transformer.process(content, filename, config, opts);
+    return transformer.process(result.code, filename, config, opts);
   },
 };

packages/react/import-component/import-component-loader.js

@@ -1,10 +1,31 @@
-const regex =
-  /importComponent\s*\(\s*\(\)\s+=>\s+import\(\s*'([^']+)'\s*\)\s*\)/g;
+const { transform } = require('@babel/core');
+const regex = /importComponent/g;
 
 function importComponentLoader(source) {
-  return source.replace(
-    regex,
-    "importComponent({ load: () => import('$1'), moduleId: require.resolveWeak('$1') })"
+  const callback = this.async();
+
+  if (!regex.test(source)) {
+    return callback(null, source);
+  }
+
+  const options = this.getOptions();
+
+  transform(
+    source,
+    {
+      plugins: [
+        [require.resolve('./babel'), options],
+        require.resolve('@babel/plugin-syntax-jsx'),
+      ],
+      filename: this.resourcePath,
+    },
+    (err, result) => {
+      if (err) {
+        return callback(err);
+      }
+
+      callback(null, result.code, result.map);
+    }
   );
 }
 

packages/react/import-component/mixin.core.js

@@ -5,7 +5,10 @@ class ImportComponentCoreMixin extends Mixin {
     const { experimentalEsbuild } = this.options;
 
     if (experimentalEsbuild) {
-      jsLoaderConfig.use.push(require.resolve('./import-component-loader.js'));
+      jsLoaderConfig.use.push({
+        loader: require.resolve('./import-component-loader.js'),
+        options: { module: 'hops', rootDir: this.config.rootDir },
+      });
     } else {
       jsLoaderConfig.options.plugins.push([
         require.resolve('../lib/babel'),

packages/react/package.json

@@ -23,6 +23,7 @@
   "dependencies": {
     "@babel/core": "^7.9.0",
     "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-syntax-jsx": "^7.8.3",
     "@babel/plugin-transform-flow-strip-types": "^7.9.0",
     "@babel/preset-react": "^7.9.4",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",

yarn.lock

@@ -527,7 +527,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.16.7":
+"@babel/plugin-syntax-jsx@^7.16.7", "@babel/plugin-syntax-jsx@^7.8.3":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
   integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==