feat: parallel-friendly babelLoader & babelSwcLoader

.changeset/clever-trams-grab.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Introduce `BabelSwcLoader`, available as `@callstack/repack/babel-swc-loader` which combines Babel and SWC into one loader, enabling Babel level of customiziability while maitaning good build performance. Can be run in parallel with `experiments.parallelLoader` in Rspack.

.changeset/dirty-cups-pick.md

@@ -0,0 +1,6 @@
+---
+"@callstack/repack-plugin-nativewind": minor
+"@callstack/repack": minor
+---
+
+ReanimatedPlugin: skip running the loader when `babel-swc-loader` is detected as part of loader chain

.changeset/mighty-plums-shout.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Introduce `BabelLoader`, available as `@callstack/repack/babel-loader` which utilizes `hermes-parser` for JS & Flow files and default babel parser for TS files. Can be run in parallel with `experiments.parallelLoader` in Rspack.

apps/tester-app/__tests__/configs/webpack.config.mjs

@@ -8,7 +8,7 @@ export default async (env) => {
       path: process.env.TEST_WEBPACK_OUTPUT_DIR,
     },
     experiments: {
-      ...config.output.experiments,
+      ...config.experiments,
       lazyCompilation: false,
     },
   };

apps/tester-app/babel.config.js

@@ -1,13 +1,9 @@
 module.exports = {
-  presets: ['module:@react-native/babel-preset'],
-  comments: true,
+  presets: ['@react-native/babel-preset'],
   plugins: [
     [
       '@babel/plugin-transform-react-jsx',
-      {
-        runtime: 'automatic',
-        importSource: 'nativewind',
-      },
+      { runtime: 'automatic', importSource: 'nativewind' },
     ],
     'react-native-worklets/plugin',
   ],

apps/tester-app/package.json

@@ -46,6 +46,7 @@
     "@rsdoctor/rspack-plugin": "^0.4.11",
     "@rspack/core": "catalog:",
     "@svgr/webpack": "^8.1.0",
+    "@swc/core": "^1.13.3",
     "@swc/helpers": "catalog:",
     "@types/jest": "^29.5.13",
     "@types/react": "catalog:testers",
@@ -58,6 +59,7 @@
     "react-native-test-app": "catalog:testers",
     "tailwindcss": "^3.4.17",
     "terser-webpack-plugin": "catalog:",
+    "thread-loader": "^4.0.4",
     "typescript": "catalog:",
     "vitest": "catalog:",
     "webpack": "catalog:"

apps/tester-app/rspack.config.mjs

@@ -20,6 +20,9 @@ export default Repack.defineRspackConfig((env) => {
     mode,
     context,
     entry: './index.js',
+    experiments: {
+      parallelLoader: true,
+    },
     resolve: {
       ...Repack.getResolveOptions({ enablePackageExports: true }),
     },
@@ -28,9 +31,15 @@ export default Repack.defineRspackConfig((env) => {
     },
     module: {
       rules: [
-        ...Repack.getJsTransformRules({
-          swc: { importSource: 'nativewind' },
-        }),
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+          type: 'javascript/auto',
+        },
         {
           test: Repack.getAssetExtensionsRegExp(
             Repack.ASSET_EXTENSIONS.filter((ext) => ext !== 'svg')

apps/tester-app/webpack.config.mjs

@@ -51,7 +51,7 @@ export default Repack.defineWebpackConfig((env) => {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
-          use: 'babel-loader',
+          use: ['thread-loader', '@callstack/repack/babel-swc-loader'],
           type: 'javascript/auto',
         },
         {

apps/tester-federation-v2/configs/rspack.host-app.mts

@@ -8,6 +8,9 @@ export default Repack.defineRspackConfig((env) => {
     mode,
     context,
     entry: './src/host/index.js',
+    experiments: {
+      parallelLoader: true,
+    },
     resolve: {
       ...Repack.getResolveOptions({ enablePackageExports: true }),
     },
@@ -17,7 +20,15 @@ export default Repack.defineRspackConfig((env) => {
     },
     module: {
       rules: [
-        ...Repack.getJsTransformRules(),
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+          type: 'javascript/auto',
+        },
         ...Repack.getAssetTransformRules(),
       ],
     },

apps/tester-federation-v2/configs/rspack.mini-app.mts

@@ -8,6 +8,9 @@ export default Repack.defineRspackConfig((env) => {
     mode,
     context,
     entry: './src/mini/index.js',
+    experiments: {
+      parallelLoader: true,
+    },
     resolve: {
       ...Repack.getResolveOptions({ enablePackageExports: true }),
     },
@@ -17,7 +20,15 @@ export default Repack.defineRspackConfig((env) => {
     },
     module: {
       rules: [
-        ...Repack.getJsTransformRules(),
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+          type: 'javascript/auto',
+        },
         ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },

apps/tester-federation-v2/configs/webpack.host-app.mts

@@ -20,7 +20,7 @@ export default Repack.defineWebpackConfig((env) => {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
-          use: 'babel-loader',
+          use: '@callstack/repack/babel-swc-loader',
           type: 'javascript/auto',
         },
         ...Repack.getAssetTransformRules(),

apps/tester-federation-v2/configs/webpack.mini-app.mts

@@ -19,7 +19,7 @@ export default Repack.defineWebpackConfig((env) => {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
-          use: 'babel-loader',
+          use: '@callstack/repack/babel-swc-loader',
           type: 'javascript/auto',
         },
         ...Repack.getAssetTransformRules({ inline: true }),

apps/tester-federation/configs/rspack.host-app.mts

@@ -9,6 +9,9 @@ export default Repack.defineRspackConfig((env) => {
     mode,
     context,
     entry: './src/host/index.js',
+    experiments: {
+      parallelLoader: true,
+    },
     resolve: {
       ...Repack.getResolveOptions({ enablePackageExports: true }),
     },
@@ -18,7 +21,15 @@ export default Repack.defineRspackConfig((env) => {
     },
     module: {
       rules: [
-        ...Repack.getJsTransformRules(),
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          type: 'javascript/auto',
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+        },
         ...Repack.getAssetTransformRules(),
       ],
     },

apps/tester-federation/configs/rspack.mini-app.mts

@@ -9,6 +9,9 @@ export default Repack.defineRspackConfig((env) => {
     mode,
     context,
     entry: './src/mini/index.js',
+    experiments: {
+      parallelLoader: true,
+    },
     resolve: {
       ...Repack.getResolveOptions({ enablePackageExports: true }),
     },
@@ -18,7 +21,15 @@ export default Repack.defineRspackConfig((env) => {
     },
     module: {
       rules: [
-        ...Repack.getJsTransformRules(),
+        {
+          test: /\.[cm]?[jt]sx?$/,
+          use: {
+            loader: '@callstack/repack/babel-swc-loader',
+            parallel: true,
+            options: {},
+          },
+          type: 'javascript/auto',
+        },
         ...Repack.getAssetTransformRules({ inline: true }),
       ],
     },

apps/tester-federation/configs/webpack.host-app.mts

@@ -19,7 +19,7 @@ export default Repack.defineWebpackConfig((env) => {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
-          use: 'babel-loader',
+          use: '@callstack/repack/babel-swc-loader',
           type: 'javascript/auto',
         },
         ...Repack.getAssetTransformRules(),

apps/tester-federation/configs/webpack.mini-app.mts

@@ -19,7 +19,7 @@ export default Repack.defineWebpackConfig((env) => {
       rules: [
         {
           test: /\.[cm]?[jt]sx?$/,
-          use: 'babel-loader',
+          use: '@callstack/repack/babel-swc-loader',
           type: 'javascript/auto',
         },
         ...Repack.getAssetTransformRules({ inline: true }),

packages/plugin-nativewind/src/plugin.ts

@@ -151,6 +151,8 @@ export class NativeWindPlugin {
      * Second, we need to configure the `builtin:swc-loader` to properly handle NativeWind's JSX transformations.
      * We look for any instances of the `builtin:swc-loader` in the Rspack configuration and modify their options
      * to include the NativeWind react import source.
+     *
+     * TODO made obsolete by the new babel-swc-loader, remove in 6.0
      */
     compiler.options.module.rules.forEach((rule) => {
       if (!rule || typeof rule !== 'object') {

packages/plugin-reanimated/src/loader.ts

@@ -5,6 +5,10 @@ interface ReanimatedLoaderOptions {
   babelPlugins?: string[];
 }
 
+interface ReanimatedLoaderData {
+  skip?: boolean;
+}
+
 // Reference: https://github.com/software-mansion/react-native-reanimated/blob/3.16.3/packages/react-native-reanimated/plugin/src/autoworkletization.ts#L19-L59
 const REANIMATED_AUTOWORKLETIZATION_KEYWORDS = [
   'worklet',
@@ -39,7 +43,8 @@ export default function reanimatedLoader(
   const callback = this.async();
   const options = this.getOptions();
 
-  if (!REANIMATED_REGEX.test(source)) {
+  const loaderData = this.data as ReanimatedLoaderData;
+  if (loaderData.skip || !REANIMATED_REGEX.test(source)) {
     callback(null, source);
     return;
   }
@@ -68,3 +73,31 @@ export default function reanimatedLoader(
     }
   );
 }
+
+// resolve the path to the babel-swc-loader once
+const babelSwcLoader = require.resolve('@callstack/repack/babel-swc-loader');
+let warningDisplayed = false;
+
+export function pitch(
+  this: LoaderContext<ReanimatedLoaderOptions>,
+  _remainingRequest: string,
+  _previousRequest: string,
+  data: ReanimatedLoaderData
+) {
+  const logger = this.getLogger('RepackReanimatedLoader');
+  for (const loader of this.loaders) {
+    // if the babel-swc-loader is found, we skip the reanimated-loader
+    // since babel-swc-loader is more performant and uses the official
+    // babel plugin directly
+    if (loader.path === babelSwcLoader) {
+      data.skip = true;
+      if (!warningDisplayed) {
+        warningDisplayed = true;
+        logger.warn(
+          '`@callstack/repack-plugin-reanimated` should not be used with `@callstack/repack/babel-swc-loader`. ' +
+            'Instead, add the `react-native-reanimated/plugin` (or `react-native-worklets/plugin`) directly to your list of babel plugins in the `babel.config.js` file in the project root.'
+        );
+      }
+    }
+  }
+}

packages/plugin-reanimated/src/plugin.ts

@@ -19,6 +19,7 @@ export class ReanimatedPlugin {
     const reanimatedVersion = this.getReanimatedVersion(reanimatedPath);
 
     // add rules for transpiling wih reanimated loader
+    // TODO made obsolete by the new babel-swc-loader, remove in 6.0
     compiler.options.module.rules.push(
       reanimatedVersion.major < 4
         ? reanimated3ModuleRules

packages/repack/package.json

@@ -10,6 +10,8 @@
     "./client": "./client/index.js",
     "./commands/*": "./commands/*.js",
     "./assets-loader": "./dist/loaders/assetsLoader/index.js",
+    "./babel-loader": "./dist/loaders/babelLoader/index.js",
+    "./babel-swc-loader": "./dist/loaders/babelSwcLoader/index.js",
     "./flow-loader": "./dist/loaders/flowLoader/index.js",
     "./react-refresh-loader": "./dist/loaders/reactRefreshLoader/index.js",
     "./mf/*": "./mf/*.js",
@@ -109,6 +111,7 @@
     "@module-federation/sdk": "0.6.10",
     "@rspack/core": "catalog:",
     "@swc/helpers": "catalog:",
+    "@types/babel__core": "^7.20.5",
     "@types/dedent": "^0.7.0",
     "@types/gradient-string": "^1.1.6",
     "@types/jest": "^29.5.12",

packages/repack/src/loaders/babelLoader/__tests__/__snapshots__/babelLoader.test.ts.snap

@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`babelLoader excludePlugins by default transforms ESM modules to CJS (baseline) 1`] = `
+""use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _bar = _interopRequireDefault(require("bar"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _bar.default;"
+`;
+
+exports[`babelLoader excludePlugins excludes transform-modules-commonjs so ESM stays intact 1`] = `
+"import foo from "bar";
+export default foo;"
+`;
+
+exports[`babelLoader includePlugins includes @babel/plugin-transform-react-jsx and transforms JSX 1`] = `
+""use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Component = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+const Component = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(View, {
+  test: 1
+});
+exports.Component = Component;"
+`;