diff --git a/Example/babel.config.js b/Example/babel.config.js index c89f9199ce6..aefd75d9f6f 100644 --- a/Example/babel.config.js +++ b/Example/babel.config.js @@ -7,6 +7,7 @@ module.exports = (api) => { 'module:metro-react-native-babel-preset', ], plugins: [ + '@babel/plugin-proposal-export-namespace-from', '@babel/plugin-proposal-optional-chaining', '@babel/plugin-transform-modules-commonjs', '../plugin', diff --git a/Example/package.json b/Example/package.json index ede8d3a4b71..38afc027995 100644 --- a/Example/package.json +++ b/Example/package.json @@ -22,7 +22,7 @@ "pod-install": "cd ios && pod install && cd .." }, "dependencies": { - "@babel/plugin-proposal-export-namespace-from": "^7.17.12", + "@babel/plugin-proposal-export-namespace-from": "^7.18.9", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@fortawesome/react-native-fontawesome": "^0.2.3", diff --git a/Example/yarn.lock b/Example/yarn.lock index f0cf77f45e4..7c1276f0cd9 100644 --- a/Example/yarn.lock +++ b/Example/yarn.lock @@ -1005,16 +1005,16 @@ resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz#aa3a8ab4c3cceff8e65eb9e73d87dc4ff320b2f5" integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA== -"@babel/helper-plugin-utils@^7.17.12": - version "7.17.12" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96" - integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA== - "@babel/helper-plugin-utils@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d" integrity sha512-gvZnm1YAAxh13eJdkb9EWHBnF3eAub3XTLCZEehHT2kWxiKVRL64+ae5Y6Ivne0mVHmMYKT+xWgZO+gQhuLUBg== +"@babel/helper-plugin-utils@^7.18.9": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.9.tgz#4b8aea3b069d8cb8a72cdfe28ddf5ceca695ef2f" + integrity sha512-aBXPT3bmtLryXaoJLyYPXPlSD4p1ld9aYeR+sJNOZjJJGiOpb+fKfh3NkcCu7J54nUJwCERPBExCCpyCOHnu/w== + "@babel/helper-plugin-utils@^7.8.3": version "7.8.3" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670" @@ -1594,12 +1594,12 @@ "@babel/helper-plugin-utils" "^7.13.0" "@babel/plugin-syntax-export-namespace-from" "^7.8.3" -"@babel/plugin-proposal-export-namespace-from@^7.17.12": - version "7.17.12" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378" - integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ== +"@babel/plugin-proposal-export-namespace-from@^7.18.9": + version "7.18.9" + resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.9.tgz#5f7313ab348cdb19d590145f9247540e94761203" + integrity sha512-k1NtHyOMvlDDFeb9G5PhUXuGj8m/wiwojgQVEhJ/fsVsMCpLyOP4h0uGEjYJKrRI+EVPlb5Jk+Gt9P97lOGwtA== dependencies: - "@babel/helper-plugin-utils" "^7.17.12" + "@babel/helper-plugin-utils" "^7.18.9" "@babel/plugin-syntax-export-namespace-from" "^7.8.3" "@babel/plugin-proposal-json-strings@^7.12.13", "@babel/plugin-proposal-json-strings@^7.14.2": diff --git a/docs/docs/fundamentals/installation.md b/docs/docs/fundamentals/installation.md index 3a224120b65..33a86a1b2b8 100644 --- a/docs/docs/fundamentals/installation.md +++ b/docs/docs/fundamentals/installation.md @@ -19,30 +19,34 @@ yarn add react-native-reanimated Add Reanimated's babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` By default, Reanimated plugin generate source location using absolute path. You can configure to use relative path: -```js {5} +```js {9} module.exports = { + presets: [ ... - plugins: [ - ... - [ - 'react-native-reanimated/plugin', { - relativeSourceLocation: true, - }, - ] - ], - }; + ], + plugins: [ + ... + [ + 'react-native-reanimated/plugin', { + relativeSourceLocation: true, + }, + ] + ], +}; ``` :::caution @@ -80,6 +84,27 @@ If you're using Proguard, make sure to add rules preventing it from optimizing T As reanimated is setup to configure and install automatically, the only thing you have to do is to run `pod install` in the `ios/` directory. Note that the auto-installation setup works for the standard React Native apps, if you have problems setting it up with a custom setup (e.g. brownfield) please start a new issue where we can find a way to guide you through that process. +## Web + +You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) Babel plugin. + +```bash +yarn add @babel/plugin-proposal-export-namespace-from +``` + +```js {7} + module.exports = { + presets: [ + ... + ], + plugins: [ + ... + '@babel/plugin-proposal-export-namespace-from', + 'react-native-reanimated/plugin', + ], + }; +``` + ## Sample React-Native project configured with Reanimated If you have troubles configuring Reanimated in your project, or just want to try the library without the need of setting it up on a fresh project we recommend checking our [Reanimated Playground](https://github.com/software-mansion-labs/reanimated-2-playground) repo, which is essentially a fresh React-Native app with Reanimated library installed and configured properly. diff --git a/docs/docs/fundamentals/web-support.md b/docs/docs/fundamentals/web-support.md index 15ba6e65009..f5c44f7c9bf 100644 --- a/docs/docs/fundamentals/web-support.md +++ b/docs/docs/fundamentals/web-support.md @@ -8,7 +8,26 @@ Since the [2.0.0-alpha.7](https://github.com/software-mansion/react-native-reanimated/releases/tag/2.0.0-alpha.7) release it's possible to launch reanimated 2 in a web browser. For that case all of the functionalities are implemented purely in javascript, hence the efficiency of the animations might drop. -If you use our +Reanimated for Web requires the following configuration steps. You need to add [`@babel/plugin-proposal-export-namespace-from`](https://babeljs.io/docs/en/babel-plugin-proposal-export-namespace-from) as well as Reanimated Babel plugin to your `babel.config.js`. + +```bash +yarn add @babel/plugin-proposal-export-namespace-from +``` + +```js {5,6} +module.exports = { + presets: [ + ... + ], + plugins: [ + ... + '@babel/plugin-proposal-export-namespace-from', + 'react-native-reanimated/plugin', + ], +}; +``` + +If you use [playground](https://github.com/software-mansion-labs/reanimated-2-playground) app and want to start it in the browser just type: ```shell diff --git a/docs/versioned_docs/version-2.0.x/installation.md b/docs/versioned_docs/version-2.0.x/installation.md index 6b27bd47e4a..43249f4eee5 100644 --- a/docs/versioned_docs/version-2.0.x/installation.md +++ b/docs/versioned_docs/version-2.0.x/installation.md @@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch: ## Babel plugin -Add Reanimated's babel plugin to your `babel.config.js`: +Add Reanimated's Babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` diff --git a/docs/versioned_docs/version-2.1.x/installation.md b/docs/versioned_docs/version-2.1.x/installation.md index 6b27bd47e4a..43249f4eee5 100644 --- a/docs/versioned_docs/version-2.1.x/installation.md +++ b/docs/versioned_docs/version-2.1.x/installation.md @@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch: ## Babel plugin -Add Reanimated's babel plugin to your `babel.config.js`: +Add Reanimated's Babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` diff --git a/docs/versioned_docs/version-2.2.x/installation.md b/docs/versioned_docs/version-2.2.x/installation.md index 6b27bd47e4a..43249f4eee5 100644 --- a/docs/versioned_docs/version-2.2.x/installation.md +++ b/docs/versioned_docs/version-2.2.x/installation.md @@ -55,15 +55,17 @@ To use Reanimated 2 built from the main branch: ## Babel plugin -Add Reanimated's babel plugin to your `babel.config.js`: +Add Reanimated's Babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` diff --git a/docs/versioned_docs/version-2.3.x/fundamentals/installation.md b/docs/versioned_docs/version-2.3.x/fundamentals/installation.md index 41a2f8a35ba..30d3cf53dd6 100644 --- a/docs/versioned_docs/version-2.3.x/fundamentals/installation.md +++ b/docs/versioned_docs/version-2.3.x/fundamentals/installation.md @@ -18,15 +18,17 @@ yarn add react-native-reanimated ## Babel plugin -Add Reanimated's babel plugin to your `babel.config.js`: +Add Reanimated's Babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` diff --git a/docs/versioned_docs/version-2.5.x/fundamentals/installation.md b/docs/versioned_docs/version-2.5.x/fundamentals/installation.md index 8312a43d386..4924e10ce81 100644 --- a/docs/versioned_docs/version-2.5.x/fundamentals/installation.md +++ b/docs/versioned_docs/version-2.5.x/fundamentals/installation.md @@ -17,15 +17,17 @@ yarn add react-native-reanimated ## Babel plugin -Add Reanimated's babel plugin to your `babel.config.js`: +Add Reanimated's Babel plugin to your `babel.config.js`: -```js {5} +```js {7} module.exports = { + presets: [ ... - plugins: [ - ... - 'react-native-reanimated/plugin', - ], + ], + plugins: [ + ... + 'react-native-reanimated/plugin', + ], }; ``` diff --git a/package.json b/package.json index cbedc2575d1..1f7954b5068 100644 --- a/package.json +++ b/package.json @@ -71,7 +71,6 @@ }, "homepage": "https://github.com/software-mansion/react-native-reanimated#readme", "dependencies": { - "@babel/plugin-proposal-export-namespace-from": "^7.17.12", "@babel/plugin-transform-object-assign": "^7.16.7", "@babel/preset-typescript": "^7.16.7", "@types/invariant": "^2.2.35", diff --git a/plugin.js b/plugin.js index 5dcf92a57ae..9873ac0c6d3 100644 --- a/plugin.js +++ b/plugin.js @@ -761,16 +761,6 @@ function isPossibleOptimization(fun) { return flags; } -const pluginProposalExportNamespaceFrom = - require('@babel/plugin-proposal-export-namespace-from').default; -const apiMock = { - assertVersion: () => { - // do nothing. - }, -}; -const ExportNamedDeclarationFn = - pluginProposalExportNamespaceFrom(apiMock).visitor.ExportNamedDeclaration; - module.exports = function ({ types: t }) { return { pre() { @@ -793,7 +783,6 @@ module.exports = function ({ types: t }) { processIfGestureHandlerEventCallbackFunctionNode(t, path, state); }, }, - ExportNamedDeclaration: ExportNamedDeclarationFn, }, }; }; diff --git a/src/index.ts b/src/index.ts index 73561d2abc2..e8eb32fb61b 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,4 +1,4 @@ -// tree-shaken side effects +import * as Animated from './Animated'; import webGlobalIsInitialized from './reanimated2/js-reanimated/global'; if (!webGlobalIsInitialized) { /* @@ -10,4 +10,4 @@ if (!webGlobalIsInitialized) { } export * from './reanimated2'; -export * as default from './Animated'; +export default Animated; diff --git a/src/index.web.ts b/src/index.web.ts new file mode 100644 index 00000000000..1ca39d94956 --- /dev/null +++ b/src/index.web.ts @@ -0,0 +1,5 @@ +// tree-shaken side effects +import './reanimated2/js-reanimated/global'; + +export * from './reanimated2'; +export * as default from './Animated'; // If this line fails, you probably forgot some installation steps. Check out the installation guide here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ 1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) 2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache diff --git a/src/reanimated2/core.ts b/src/reanimated2/core.ts index 1bcfe26af52..4fdfa80fa11 100644 --- a/src/reanimated2/core.ts +++ b/src/reanimated2/core.ts @@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction = () => { 'worklet'; }; +const throwUninitializedReanimatedException = () => { + throw new Error( + "Failed to initialize react-native-reanimated library, make sure you followed installation steps here: https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ \n1) Make sure reanimated's babel plugin is installed in your babel.config.js (you should have 'react-native-reanimated/plugin' listed there - also see the above link for details) \n2) Make sure you reset build cache after updating the config, run: yarn start --reset-cache" + ); +}; + export const checkPluginState: (throwError: boolean) => boolean = ( throwError = true ) => { if (!testWorklet.__workletHash && !shouldBeUseWeb()) { if (throwError) { - throw new Error( - "Reanimated 2 failed to create a worklet, maybe you forgot to add Reanimated's babel plugin?" - ); + throwUninitializedReanimatedException(); } return false; } @@ -62,11 +66,7 @@ export const isConfigured: (throwError?: boolean) => boolean = ( }; export const isConfiguredCheck: () => void = () => { - if (!isConfigured(true)) { - throw new Error( - 'If you want to use Reanimated 2 then go through our installation steps https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation' - ); - } + checkPluginState(true); }; function pushFrame(frame: (timestamp: Timestamp) => void): void { diff --git a/yarn.lock b/yarn.lock index c7cc73959d7..2c4438b5354 100644 --- a/yarn.lock +++ b/yarn.lock @@ -560,11 +560,6 @@ resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz" integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA== -"@babel/helper-plugin-utils@^7.17.12": - version "7.17.12" - resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96" - integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA== - "@babel/helper-plugin-utils@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.18.6.tgz#9448974dd4fb1d80fefe72e8a0af37809cd30d6d" @@ -995,14 +990,6 @@ "@babel/helper-plugin-utils" "^7.16.7" "@babel/plugin-syntax-export-namespace-from" "^7.8.3" -"@babel/plugin-proposal-export-namespace-from@^7.17.12": - version "7.17.12" - resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.17.12.tgz#b22864ccd662db9606edb2287ea5fd1709f05378" - integrity sha512-j7Ye5EWdwoXOpRmo5QmRyHPsDIe6+u70ZYZrd7uz+ebPYFKfRcLcNu3Ro0vOlJ5zuv8rU7xa+GttNiRzX56snQ== - dependencies: - "@babel/helper-plugin-utils" "^7.17.12" - "@babel/plugin-syntax-export-namespace-from" "^7.8.3" - "@babel/plugin-proposal-export-namespace-from@^7.18.6": version "7.18.6" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-export-namespace-from/-/plugin-proposal-export-namespace-from-7.18.6.tgz#1016f0aa5ab383bbf8b3a85a2dcaedf6c8ee7491"