feat: add option to disable transforms in Reanimated plugin (#1270)

Author: jbroma

.changeset/thick-facts-make.md

@@ -0,0 +1,6 @@
+---
+"@callstack/repack-plugin-reanimated": patch
+"@callstack/repack": patch
+---
+
+ReanimatedPlugin: add option to disable transforms. This is useful when using `babel-swc-loader` or `babel-loader`

apps/tester-app/rspack.config.mjs

@@ -122,6 +122,7 @@ export default Repack.defineRspackConfig((env) => {
       }),
       new ReanimatedPlugin({
         babelPluginOptions: { relativeSourceLocation: true },
+        unstable_disableTransform: true,
       }),
       new NativeWindPlugin({ cssInteropOptions: { inlineRem: 16 } }),
       process.env.RSDOCTOR && new RsdoctorRspackPlugin(),

packages/plugin-reanimated/src/loader.ts

@@ -94,8 +94,13 @@ export function pitch(
       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.'
+          'When using `@callstack/repack-plugin-reanimated` together with ' +
+            '`@callstack/repack/babel-swc-loader` you should turn off the ' +
+            'transforms for `react-native-reanimated` via the ' +
+            '`unstable_disableTransform` option. Instead, please 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

@@ -9,6 +9,13 @@ interface ReanimatedPluginOptions {
    * Custom options passed to 'react-native-reanimated/plugin' or 'react-native-worklets/plugin' babel plugins.
    */
   babelPluginOptions?: Record<string, any>;
+
+  /**
+   * Disable adding transformation rules for reanimated / worklets babel plugin.
+   * This is useful when handling using `babel-swc-loader` or `babel-loader` and
+   * you have already added the babel plugin to your babel config.
+   */
+  unstable_disableTransform?: boolean;
 }
 
 export class ReanimatedPlugin {
@@ -31,14 +38,16 @@ export class ReanimatedPlugin {
       this.ensureDependencyInstalled(compiler.context, 'react-native-worklets');
     }
 
-    // add rules for transpiling with reanimated loader
-    // TODO made obsolete by the new babel-swc-loader, remove in 6.0
-    compiler.options.module.rules.push(
-      createReanimatedModuleRules(
-        reanimatedVersion.major,
-        this.options.babelPluginOptions
-      )
-    );
+    if (!this.options.unstable_disableTransform) {
+      // add rules for transpiling with reanimated loader
+      // TODO made obsolete by the new babel-swc-loader, remove in 6.0
+      compiler.options.module.rules.push(
+        createReanimatedModuleRules(
+          reanimatedVersion.major,
+          this.options.babelPluginOptions
+        )
+      );
+    }
 
     // ignore the 'setUpTests' warning from reanimated which is not relevant
     compiler.options.ignoreWarnings = compiler.options.ignoreWarnings ?? [];