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 c7cae06804c..f1ea40c3c56 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 bc0df5a5b54..0bfe3b359c8 100644 --- a/Example/yarn.lock +++ b/Example/yarn.lock @@ -1012,16 +1012,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" @@ -1601,12 +1601,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 70d952a2316..bf55af18a6b 100644 --- a/docs/docs/fundamentals/installation.md +++ b/docs/docs/fundamentals/installation.md @@ -20,30 +20,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 @@ -81,6 +85,27 @@ If you're using Proguard, make sure to add rule preventing it from optimizing Tu 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 ion 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 48d89c01fad..fa5a3ffe3e0 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 48d89c01fad..fa5a3ffe3e0 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 48d89c01fad..fa5a3ffe3e0 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 3623a41bd7a..a4648330492 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 c9877924d4c..0b523aafa33 100644 --- a/docs/versioned_docs/version-2.5.x/fundamentals/installation.md +++ b/docs/versioned_docs/version-2.5.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/package.json b/package.json index 4831a1af5a7..519ea026b85 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,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 bba5886b898..70bf42e93d2 100644 --- a/plugin.js +++ b/plugin.js @@ -758,16 +758,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() { @@ -790,7 +780,6 @@ module.exports = function ({ types: t }) { processIfGestureHandlerEventCallbackFunctionNode(t, path, state); }, }, - ExportNamedDeclaration: ExportNamedDeclarationFn, }, }; }; diff --git a/src/index.ts b/src/index.ts index 27785a1aab6..8ae442187c9 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) { /* @@ -12,4 +12,4 @@ if (!webGlobalIsInitialized) { // @ts-ignore backward compatibility with treeshaking export * from './reanimated1'; 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 7c897614ce3..79a257050b4 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 8ab2496b5e5..699a0aaa498 100644 --- a/yarn.lock +++ b/yarn.lock @@ -612,11 +612,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" @@ -1088,14 +1083,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"