diff --git a/.changeset/mean-dodos-hear.md b/.changeset/mean-dodos-hear.md new file mode 100644 index 000000000..2465d3e3f --- /dev/null +++ b/.changeset/mean-dodos-hear.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack-plugin-reanimated": minor +--- + +Allow passing babel plugin options to RepackPluginReanimated diff --git a/.changeset/tangy-lines-cheer.md b/.changeset/tangy-lines-cheer.md new file mode 100644 index 000000000..2a9e6cc69 --- /dev/null +++ b/.changeset/tangy-lines-cheer.md @@ -0,0 +1,5 @@ +--- +"@callstack/repack-plugin-reanimated": patch +--- + +Ensure react-native-worklets is installed when using Reanimated >=4 diff --git a/apps/tester-app/rspack.config.mjs b/apps/tester-app/rspack.config.mjs index c1f46d57e..df9ecf6cc 100644 --- a/apps/tester-app/rspack.config.mjs +++ b/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), diff --git a/packages/plugin-reanimated/src/plugin.ts b/packages/plugin-reanimated/src/plugin.ts index 015613256..e920c1148 100644 --- a/packages/plugin-reanimated/src/plugin.ts +++ b/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; +} 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 diff --git a/packages/plugin-reanimated/src/rules.ts b/packages/plugin-reanimated/src/rules.ts index b70ee54f9..783936a35 100644 --- a/packages/plugin-reanimated/src/rules.ts +++ b/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 = {} +) => { 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], ], }, },