feat: skip reaniamted loader when hybrid loader is found

Author: jbroma

apps/tester-app/rspack.config.mjs

@@ -1,7 +1,7 @@
 import path from 'node:path';
 import * as Repack from '@callstack/repack';
 import { NativeWindPlugin } from '@callstack/repack-plugin-nativewind';
-// import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 
 const dirname = Repack.getDirname(import.meta.url);
@@ -129,7 +129,7 @@ export default Repack.defineRspackConfig((env) => {
       //   exclude: /index.bundle$/,
       // }),
       process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
-      // new ReanimatedPlugin(),
+      new ReanimatedPlugin(),
       new NativeWindPlugin({ cssInteropOptions: { inlineRem: 16 } }),
     ].filter(Boolean),
   };

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,24 @@ export default function reanimatedLoader(
     }
   );
 }
+
+// resolve the path to the hybrid-js-loader once
+const hybridJsLoaderPath = require.resolve(
+  '@callstack/repack/hybrid-js-loader'
+);
+
+export function pitch(
+  this: LoaderContext<ReanimatedLoaderOptions>,
+  _remainingRequest: string,
+  _previousRequest: string,
+  data: ReanimatedLoaderData
+) {
+  for (const loader of this.loaders) {
+    // if the hybrid-js-loader is found, we skip the reanimated loader
+    // since hybrid-js-loader is more performant and uses the official
+    // babel plugin directly
+    if (loader.path === hybridJsLoaderPath) {
+      data.skip = true;
+    }
+  }
+}