Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/mean-dodos-hear.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@callstack/repack-plugin-reanimated": minor
---

Allow passing babel plugin options to RepackPluginReanimated
5 changes: 5 additions & 0 deletions .changeset/tangy-lines-cheer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@callstack/repack-plugin-reanimated": patch
---

Ensure react-native-worklets is installed when using Reanimated >=4
4 changes: 3 additions & 1 deletion apps/tester-app/rspack.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -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),
Expand Down
24 changes: 19 additions & 5 deletions packages/plugin-reanimated/src/plugin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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
Expand Down
11 changes: 7 additions & 4 deletions packages/plugin-reanimated/src/rules.ts
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -27,7 +30,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
'@babel/plugin-syntax-typescript',
{ isTSX: false, allowNamespaces: true },
],
workletsBabelPlugin,
[workletsBabelPlugin, pluginOptions],
],
},
},
Expand All @@ -42,7 +45,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
'@babel/plugin-syntax-typescript',
{ isTSX: true, allowNamespaces: true },
],
workletsBabelPlugin,
[workletsBabelPlugin, pluginOptions],
],
},
},
Expand All @@ -54,7 +57,7 @@ const createReanimatedModuleRules = (majorVersion: number) => {
options: {
babelPlugins: [
'babel-plugin-syntax-hermes-parser',
workletsBabelPlugin,
[workletsBabelPlugin, pluginOptions],
],
},
},
Expand Down