-
Notifications
You must be signed in to change notification settings - Fork 116
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* chore: setup package * chore: update workspace settings * chore: setup tsc and build script * feat: basic plugin setup * chore: use bundler module resolution * feat: use custom loader instead of babel loader * fix: lib config, typos * fix: provide filename to babel * fix: disable external helpers for RN since they alter order of execution * chore: switch to CJS for compat with Rsdoctor * refactor: wording * chore: add README.md * chore: add ReanimatedBox test to tester app * chore: update podfile lock * chore: align version, add comments to RN module rules * refactor: expose loader, add cjs path * feat: expose loader, update README with rationale * chore: add changeset * chore: fix ts setup in reanimated plugin * fix: tsconfig setup in reanimated (again)
- Loading branch information
Showing
20 changed files
with
713 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@callstack/repack": minor | ||
| --- | ||
|
|
||
| Add Repack Reanimated Plugin which integrates react-native-reanimated into the project |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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', | ||
| }, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from '../dist/loader.js'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| module.exports = require('../dist/loader.js'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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" | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { ReanimatedPlugin } from './plugin.js'; | ||
| export { reanimatedModuleRules } from './rules.js'; |
Oops, something went wrong.