From 9a6f1610a523512d00659e336dd37b7f36a57688 Mon Sep 17 00:00:00 2001 From: Krzysztof Piaskowy Date: Tue, 16 Aug 2022 11:01:20 +0200 Subject: [PATCH] Update plugin error message (#3437) ## Description Tree-shaking requires `export * as default` syntax, but this syntax requires the babel plugin `@babel/plugin-proposal-export-namespace-from`. Previously I embedded this plugin inside the Reanimated plugin, but this doesn't work when someone doesn't add Reanimated plugin to their project. In this situation, users receive misleading information about syntax errors instead of messages about missing plugin configuration. Tree-shaking works only for the web, so I used `as default` syntax only for web implementation. In addition, I updated the exception message. The file `index.web.ts` contains information about exceptions in the comment because this is the only possibility to give users information on exceptions during static analyzes of code. Fixes https://github.com/software-mansion/react-native-reanimated/issues/3410 --- Example/babel.config.js | 1 + Example/package.json | 2 +- Example/yarn.lock | 20 +++---- docs/docs/fundamentals/installation.md | 55 ++++++++++++++----- docs/docs/fundamentals/web-support.md | 21 ++++++- .../version-2.0.x/installation.md | 14 +++-- .../version-2.1.x/installation.md | 14 +++-- .../version-2.2.x/installation.md | 14 +++-- .../fundamentals/installation.md | 14 +++-- .../fundamentals/installation.md | 14 +++-- package.json | 1 - plugin.js | 11 ---- src/index.ts | 4 +- src/index.web.ts | 5 ++ src/reanimated2/core.ts | 16 +++--- yarn.lock | 13 ----- 16 files changed, 127 insertions(+), 92 deletions(-) create mode 100644 src/index.web.ts 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 1c8a3a9d8ab..ca7cb0fcf3b 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 07f70cffcc4..83a5de006db 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 ca11249ebdf..d3a4cb68538 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,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"