feat: support passing options to reanimated / worklets plugin (#1269)

Author: jbroma

.changeset/mean-dodos-hear.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack-plugin-reanimated": minor
+---
+
+Allow passing babel plugin options to RepackPluginReanimated

.changeset/tangy-lines-cheer.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack-plugin-reanimated": patch
+---
+
+Ensure react-native-worklets is installed when using Reanimated >=4

apps/tester-app/rspack.config.mjs

@@ -120,7 +120,9 @@ export default Repack.defineRspackConfig((env) => {
           },
         ],
       }),
-      new ReanimatedPlugin(),
+      new ReanimatedPlugin({
+        babelPluginOptions: { relativeSourceLocation: true },
+      }),
       new NativeWindPlugin({ cssInteropOptions: { inlineRem: 16 } }),
       process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
     ].filter(Boolean),

packages/plugin-reanimated/src/plugin.ts

@@ -2,9 +2,18 @@ import path from 'node:path';
 import type { Compiler as RspackCompiler } from '@rspack/core';
 import semver, { type SemVer } from 'semver';
 import type { Compiler as WebpackCompiler } from 'webpack';
-import { reanimated3ModuleRules, reanimated4ModuleRules } from './rules.js';
+import { createReanimatedModuleRules } from './rules.js';
+
+interface ReanimatedPluginOptions {
+  /**
+   * Custom options passed to 'react-native-reanimated/plugin' or 'react-native-worklets/plugin' babel plugins.
+   */
+  babelPluginOptions?: Record<string, any>;
+}
 
 export class ReanimatedPlugin {
+  constructor(private options: ReanimatedPluginOptions = {}) {}
+
   apply(compiler: RspackCompiler): void;
   apply(compiler: WebpackCompiler): void;
 
@@ -18,12 +27,17 @@ export class ReanimatedPlugin {
 
     const reanimatedVersion = this.getReanimatedVersion(reanimatedPath);
 
-    // add rules for transpiling wih reanimated loader
+    if (reanimatedVersion.major >= 4) {
+      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(
-      reanimatedVersion.major < 4
-        ? reanimated3ModuleRules
-        : reanimated4ModuleRules
+      createReanimatedModuleRules(
+        reanimatedVersion.major,
+        this.options.babelPluginOptions
+      )
     );
 
     // ignore the 'setUpTests' warning from reanimated which is not relevant

packages/plugin-reanimated/src/rules.ts

@@ -1,6 +1,9 @@
 import { getModulePaths } from '@callstack/repack';
 
-const createReanimatedModuleRules = (majorVersion: number) => {
+export const createReanimatedModuleRules = (
+  majorVersion: number,
+  pluginOptions: Record<string, any> = {}
+) => {
   const workletsBabelPlugin =
     majorVersion < 4
       ? 'react-native-reanimated/plugin'
@@ -27,7 +30,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
                 '@babel/plugin-syntax-typescript',
                 { isTSX: false, allowNamespaces: true },
               ],
-              workletsBabelPlugin,
+              [workletsBabelPlugin, pluginOptions],
             ],
           },
         },
@@ -42,7 +45,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
                 '@babel/plugin-syntax-typescript',
                 { isTSX: true, allowNamespaces: true },
               ],
-              workletsBabelPlugin,
+              [workletsBabelPlugin, pluginOptions],
             ],
           },
         },
@@ -54,7 +57,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
           options: {
             babelPlugins: [
               'babel-plugin-syntax-hermes-parser',
-              workletsBabelPlugin,
+              [workletsBabelPlugin, pluginOptions],
             ],
           },
         },