software-mansion · piaskowyk · Aug 16, 2022 · Aug 2, 2022 · Aug 12, 2022 · Aug 12, 2022
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -8,7 +8,24 @@ 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 = {
+  ...
+  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
@@ -57,13 +57,15 @@ To use Reanimated 2 built from the main branch:
 
 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
@@ -57,13 +57,15 @@ To use Reanimated 2 built from the main branch:
 
 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
@@ -57,13 +57,15 @@ To use Reanimated 2 built from the main branch:
 
 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
@@ -20,13 +20,15 @@ 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',
+    ],
   };
 ```
 

diff --git a/docs/versioned_docs/version-2.5.x/fundamentals/installation.md b/docs/versioned_docs/version-2.5.x/fundamentals/installation.md
@@ -19,13 +19,15 @@ 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',
+    ],
   };
 ```
 

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
   }
@@ -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
@@ -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"