feat: reanimated plugin

.changeset/angry-foxes-applaud.md

@@ -0,0 +1,5 @@
+---
+"@callstack/repack": minor
+---
+
+Add Repack Reanimated Plugin which integrates react-native-reanimated into the project

.changeset/config.json

@@ -6,7 +6,8 @@
     [
       "@callstack/repack",
       "@callstack/repack-dev-server",
-      "@callstack/repack-init"
+      "@callstack/repack-init",
+      "@callstack/repack-plugin-reanimated"
     ]
   ],
   "linked": [],

apps/tester-app/ios/Podfile.lock

@@ -1581,6 +1581,93 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNReanimated (3.16.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated (= 3.16.3)
+    - RNReanimated/worklets (= 3.16.3)
+    - Yoga
+  - RNReanimated/reanimated (3.16.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - RNReanimated/reanimated/apple (= 3.16.3)
+    - Yoga
+  - RNReanimated/reanimated/apple (3.16.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
+  - RNReanimated/worklets (3.16.3):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCodegen
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - RNSVG (15.8.0):
     - DoubleConversion
     - glog
@@ -1700,6 +1787,7 @@ DEPENDENCIES:
   - ReactTestApp-DevSupport (from `../node_modules/react-native-test-app`)
   - ReactTestApp-Resources (from `..`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
@@ -1845,6 +1933,8 @@ EXTERNAL SOURCES:
     :path: ".."
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNReanimated:
+    :path: "../node_modules/react-native-reanimated"
   RNSVG:
     :path: "../node_modules/react-native-svg"
   Yoga:
@@ -1919,6 +2009,7 @@ SPEC CHECKSUMS:
   ReactTestApp-DevSupport: aa137b52b223ebecf49fd5569290759a6d0b5590
   ReactTestApp-Resources: 8d72c3deef156833760694a288ff334af4d427d7
   RNCAsyncStorage: 3ad840f7b17b45ca7ebbbb0e80948564a9513315
+  RNReanimated: 1f9ef2dc2001866fe8da3f3ac78d683252e8872f
   RNSVG: 536cd3c866c878faf72beaba166c8b02fe2b762b
   SocketRocket: d4aabe649be1e368d1318fdf28a022d714d65748
   SwiftyRSA: 8c6dd1ea7db1b8dc4fb517a202f88bb1354bc2c6

apps/tester-app/package.json

@@ -20,17 +20,19 @@
     "@react-native-async-storage/async-storage": "^1.23.1",
     "react": "18.3.1",
     "react-native": "0.76.3",
+    "react-native-reanimated": "^3.16.3",
     "react-native-svg": "15.8.0"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",
     "@callstack/repack": "workspace:*",
+    "@callstack/repack-plugin-reanimated": "workspace:*",
     "@react-native-community/cli": "15.0.1",
-    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native-community/cli-platform-android": "15.0.1",
+    "@react-native-community/cli-platform-ios": "15.0.1",
     "@react-native/babel-preset": "0.76.3",
     "@react-native/typescript-config": "0.76.3",
-    "@rsdoctor/rspack-plugin": "^0.4.5",
+    "@rsdoctor/rspack-plugin": "^0.4.11",
     "@rspack/core": "1.0.8",
     "@svgr/webpack": "^8.1.0",
     "@swc/helpers": "^0.5.13",

apps/tester-app/rspack.config.mjs

@@ -2,6 +2,7 @@
 import { createRequire } from 'node:module';
 import path from 'node:path';
 import * as Repack from '@callstack/repack';
+import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
 import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
 
 const dirname = Repack.getDirname(import.meta.url);
@@ -195,6 +196,7 @@ export default (env) => {
       //   exclude: /index.bundle$/,
       // }),
       process.env.RSDOCTOR && new RsdoctorRspackPlugin(),
+      new ReanimatedPlugin(),
     ].filter(Boolean),
   };
 };

apps/tester-app/src/App.tsx

@@ -7,6 +7,7 @@ import { SectionContainer } from './ui/SectionContainer';
 import { AssetsTestContainer } from './assetsTest/AssetsTestContainer';
 import { AsyncContainer } from './asyncChunks/AsyncContainer';
 import { MiniAppsContainer } from './miniapp/MiniAppsContainer';
+import { ReanimatedBox } from './reanimated/ReanimatedBox';
 import { RemoteContainer } from './remoteChunks/RemoteContainer';
 
 Appearance.setColorScheme('light');
@@ -27,6 +28,9 @@ const App = () => {
         <Section title="Assets test">
           <AssetsTestContainer />
         </Section>
+        <Section title="Reanimated test">
+          <ReanimatedBox />
+        </Section>
       </SectionContainer>
     </AppContainer>
   );

apps/tester-app/src/reanimated/ReanimatedBox.tsx

@@ -0,0 +1,42 @@
+import { Button, StyleSheet, View } from 'react-native';
+import Animated, { useSharedValue, withSpring } from 'react-native-reanimated';
+
+export function ReanimatedBox() {
+  const width = useSharedValue<number>(100);
+
+  const handlePress = () => {
+    width.value = withSpring(width.value + 50);
+  };
+
+  const handleReset = () => {
+    width.value = withSpring(100);
+  };
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={{ ...styles.box, width }} />
+      <View style={styles.buttons}>
+        <Button onPress={handlePress} title="Click" />
+        <Button onPress={handleReset} title="Reset" />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    marginVertical: 16,
+  },
+  box: {
+    height: 100,
+    backgroundColor: '#b58df1',
+    borderRadius: 20,
+    marginVertical: 0,
+  },
+  buttons: {
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+  },
+});

packages/plugin-reanimated/README.md

@@ -0,0 +1,96 @@
+<p align="center">
+    <img src="https://raw.githubusercontent.com/callstack/repack/HEAD/logo.png">
+</p>
+<p align="center">
+A toolkit to build your React Native application with Rspack or Webpack.
+</p>
+
+---
+
+[![Build Status][build-badge]][build]
+[![Version][version-badge]][version]
+[![MIT License][license-badge]][license]
+[![PRs Welcome][prs-welcome-badge]][prs-welcome]
+[![Code of Conduct][coc-badge]][coc]
+
+`@callstack/repack-plugin-reanimated` is a plugin for `@callstack/repack` that integrates `react-native-reanimated` into your React Native projects.
+
+## About
+
+This plugin exists in order to simplify the setup required to get `react-native-reanimated` working with Re.Pack and to minimize the impact on build performance. It looks for relevant keywords like `worklet` inside the source before transforming the file with `babel`.
+
+## Installation
+
+```sh
+npm install -D @callstack/repack-plugin-reanimated
+```
+
+## Usage
+
+### Plugin
+
+To add the plugin to your Re.Pack configuration, update your `rspack.config.js` or `webpack.config.js` as follows:
+
+```js
+import { ReanimatedPlugin } from '@callstack/repack-plugin-reanimated';
+
+export default (env) => {
+  // ...
+  return {
+    // ...
+    plugins: [
+      // ...
+      new ReanimatedPlugin(),
+    ],
+  };
+};
+```
+
+### Loader
+
+The plugin also comes with it's own loader, which you can use on it's own inside `rspack.config.js` or `webpack.config.js` like this:
+
+```js
+export default (env) => {
+  // ...
+  return {
+    // ...
+    module: {
+      rules: [
+        {
+          test: /\.ts$/,
+          use: {
+            loader: '@callstack/repack-plugin-reanimated/loader',
+            options: {
+              babelPlugins: [
+                [
+                  '@babel/plugin-syntax-typescript',
+                  { isTSX: false, allowNamespaces: true },
+                ],
+              ],
+            },
+          },
+        },
+      ],
+    },
+  };
+};
+```
+
+---
+
+Check out our website at https://re-pack.dev for more info and documentation or our GitHub: https://github.com/callstack/repack.
+
+<!-- badges -->
+
+[callstack-readme-with-love]: https://callstack.com/?utm_source=github.com&utm_medium=referral&utm_campaign=react-native-paper&utm_term=readme-with-love
+[build-badge]: https://img.shields.io/github/workflow/status/callstack/repack/CI/main?style=flat-square
+[build]: https://github.com/callstack/repack/actions/workflows/main.yml
+[version-badge]: https://img.shields.io/npm/v/@callstack/repack-plugin-reanimated?style=flat-square
+[version]: https://www.npmjs.com/package/@callstack/repack-plugin-reanimated
+[license-badge]: https://img.shields.io/npm/l/@callstack/repack-plugin-reanimated?style=flat-square
+[license]: https://github.com/callstack/repack/blob/master/LICENSE
+[prs-welcome-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
+[prs-welcome]: ./CONTRIBUTING.md
+[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
+[coc]: https://github.com/callstack/repack/blob/master/CODE_OF_CONDUCT.md

packages/plugin-reanimated/loader/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/loader.js';

packages/plugin-reanimated/loader/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/loader.js');

packages/plugin-reanimated/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@callstack/repack-plugin-reanimated",
+  "version": "5.0.0-rc.2",
+  "description": "A plugin for @callstack/repack that integrates react-native-reanimated",
+  "author": "Jakub Romańczyk <[email protected]>",
+  "license": "MIT",
+  "homepage": "https://github.com/callstack/repack",
+  "repository": "github:callstack/repack",
+  "type": "commonjs",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist", "loader"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./loader": {
+      "types": "./loader/index.d.ts",
+      "default": "./loader/index.js"
+    }
+  },
+  "keywords": [
+    "repack",
+    "re.pack",
+    "plugin",
+    "repack-plugin",
+    "reanimated",
+    "react-native-reanimated"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "engineStrict": true,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@babel/core": "^7.20",
+    "@callstack/repack": "^5"
+  },
+  "devDependencies": {
+    "@callstack/repack": "workspace:*",
+    "@rspack/core": "1.0.8",
+    "@types/babel__core": "7.20.5",
+    "@types/node": "^18"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit"
+  }
+}

packages/plugin-reanimated/src/index.ts

@@ -0,0 +1,2 @@
+export { ReanimatedPlugin } from './plugin.js';
+export { reanimatedModuleRules } from './rules.js';