Skip to content

Commit

Permalink
Update plugin error message (#3437)
Browse files Browse the repository at this point in the history
## 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 #3410
  • Loading branch information
piaskowyk committed Aug 17, 2022
1 parent d42b63c commit 6668dd1
Show file tree
Hide file tree
Showing 16 changed files with 127 additions and 92 deletions.
1 change: 1 addition & 0 deletions Example/babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
2 changes: 1 addition & 1 deletion Example/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
20 changes: 10 additions & 10 deletions Example/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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":
Expand Down
55 changes: 40 additions & 15 deletions docs/docs/fundamentals/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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.
Expand Down
21 changes: 20 additions & 1 deletion docs/docs/fundamentals/web-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
14 changes: 8 additions & 6 deletions docs/versioned_docs/version-2.0.x/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
```

Expand Down
14 changes: 8 additions & 6 deletions docs/versioned_docs/version-2.1.x/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
```

Expand Down
14 changes: 8 additions & 6 deletions docs/versioned_docs/version-2.2.x/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
```

Expand Down
14 changes: 8 additions & 6 deletions docs/versioned_docs/version-2.3.x/fundamentals/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
```

Expand Down
14 changes: 8 additions & 6 deletions docs/versioned_docs/version-2.5.x/fundamentals/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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',
],
};
```

Expand Down
1 change: 0 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
11 changes: 0 additions & 11 deletions plugin.js
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand All @@ -790,7 +780,6 @@ module.exports = function ({ types: t }) {
processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
},
},
ExportNamedDeclaration: ExportNamedDeclarationFn,
},
};
};
4 changes: 2 additions & 2 deletions src/index.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// tree-shaken side effects
import * as Animated from './Animated';
import webGlobalIsInitialized from './reanimated2/js-reanimated/global';
if (!webGlobalIsInitialized) {
/*
Expand All @@ -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;
5 changes: 5 additions & 0 deletions src/index.web.ts
Original file line number Diff line number Diff line change
@@ -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
16 changes: 8 additions & 8 deletions src/reanimated2/core.ts
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,18 @@ const testWorklet: BasicWorkletFunction<void> = () => {
'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;
}
Expand All @@ -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 {
Expand Down
13 changes: 0 additions & 13 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down

0 comments on commit 6668dd1

Please sign in to comment.