🌲 Reduce bundle size on Web by 80% (#3278)

.eslintrc.js

@@ -14,7 +14,9 @@ module.exports = {
   },
   settings: {
     'import/resolver': {
-      'babel-module': {},
+      'babel-module': {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
     },
   },
   rules: {

Example/babel.config.js

@@ -23,7 +23,7 @@ module.exports = (api) => {
             'module-resolver',
             {
               alias: {
-                'react-native-reanimated': '../src/Animated',
+                'react-native-reanimated': '../src/index',
                 react: './node_modules/react',
                 'react-native': './node_modules/react-native',
                 '@babel': './node_modules/@babel',

Example/package.json

@@ -21,6 +21,7 @@
     "e2e:tests": "yarn e2e:android && yarn e2e:ios"
   },
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
     "@fortawesome/react-native-fontawesome": "^0.2.3",

Example/yarn.lock

@@ -865,6 +865,11 @@
   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.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz#9ea293be19babc0f52ff8ca88b34c3611b208670"
@@ -1357,6 +1362,14 @@
     "@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==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+    "@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":
   version "7.14.2"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.14.2.tgz#830b4e2426a782e8b2878fbfe2cba85b70cbf98c"

TVOSExample/babel.config.js

@@ -23,7 +23,7 @@ module.exports = api => {
             'module-resolver',
             {
               alias: {
-                'react-native-reanimated': '../src/Animated',
+                'react-native-reanimated': '../src/index',
                 react: './node_modules/react',
                 'react-native': './node_modules/react-native',
                 '@babel': './node_modules/@babel',

TVOSExample/package.json

@@ -11,6 +11,7 @@
     "lint": "eslint ."
   },
   "dependencies": {
+    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
     "glob-to-regexp": "^0.4.1",
     "lodash.isequal": "^4.5.0",
     "react": "17.0.2",

TVOSExample/yarn.lock

@@ -195,6 +195,11 @@
   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", "@babel/helper-plugin-utils@^7.8.3":
+  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-remap-async-to-generator@^7.16.8":
   version "7.16.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.16.8.tgz#29ffaade68a367e2ed09c90901986918d25e57e3"
@@ -295,6 +300,14 @@
     "@babel/helper-plugin-utils" "^7.16.7"
     "@babel/plugin-syntax-export-default-from" "^7.16.7"
 
+"@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-nullish-coalescing-operator@^7.0.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.13.8":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.16.7.tgz#141fc20b6857e59459d430c850a0011e36561d99"
@@ -366,6 +379,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.16.7"
 
+"@babel/plugin-syntax-export-namespace-from@^7.8.3":
+  version "7.8.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz#028964a9ba80dbc094c915c487ad7c4e7a66465a"
+  integrity sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-syntax-flow@^7.0.0", "@babel/plugin-syntax-flow@^7.16.7", "@babel/plugin-syntax-flow@^7.2.0":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.16.7.tgz#202b147e5892b8452bbb0bb269c7ed2539ab8832"

__tests__/hooks.useSharedValue.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
-import Animated, { useSharedValue } from '../src/Animated';
+import Animated, { useSharedValue } from '../src';
 
 jest.mock('../src/ReanimatedEventEmitter');
 jest.mock('../src/ReanimatedModule');

package.json

@@ -34,10 +34,10 @@
     "clean:deep": "cd android && rm -rf .cxx .gradle build && cd ../Example/android && rm -rf .gradle build app/build && cd ../.. && yarn clean",
     "reset:deep": "yarn clean:deep && yarn setup"
   },
-  "main": "lib/Animated.js",
-  "module": "lib/Animated",
-  "react-native": "src/Animated",
-  "source": "src/Animated",
+  "main": "lib/index.js",
+  "module": "lib/index",
+  "react-native": "src/index",
+  "source": "src/index",
   "types": "react-native-reanimated.d.ts",
   "files": [
     "Common/",
@@ -74,6 +74,7 @@
   },
   "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",
@@ -154,5 +155,10 @@
       "commonjs",
       "module"
     ]
-  }
+  },
+  "sideEffects": [
+    "./lib/reanimated2/core",
+    "./lib/reanimated2/js-reanimated/global",
+    "./lib/index"
+  ]
 }

plugin.js

@@ -756,6 +756,16 @@ 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() {
@@ -778,6 +788,7 @@ module.exports = function ({ types: t }) {
           processIfGestureHandlerEventCallbackFunctionNode(t, path, state);
         },
       },
+      ExportNamedDeclaration: ExportNamedDeclarationFn,
     },
   };
 };

src/Animated.ts

@@ -0,0 +1,11 @@
+export { default as createAnimatedComponent } from './createAnimatedComponent';
+export {
+  addWhitelistedNativeProps,
+  addWhitelistedUIProps,
+} from './ConfigHelper';
+
+export { default as Text } from './reanimated2/component/Text';
+export { default as View } from './reanimated2/component/View';
+export { default as ScrollView } from './reanimated2/component/ScrollView';
+export { default as Image } from './reanimated2/component/Image';
+export { default as FlatList } from './reanimated2/component/FlatList';

src/index.ts

@@ -0,0 +1,5 @@
+// tree-shaken side effects
+import './reanimated2/js-reanimated/global';
+
+export * from './reanimated2';
+export * as default from './Animated';

src/reanimated2/component/FlatList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { FlatList, FlatListProps, LayoutChangeEvent } from 'react-native';
-import WrappedComponents from './WrappedComponents';
+import ReanimatedView from './View';
 import createAnimatedComponent from '../../createAnimatedComponent';
 import { ILayoutAnimationBuilder } from '../layoutReanimation/animationBuilder/commonTypes';
 
@@ -11,12 +11,9 @@ const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => {
     onLayout: (event: LayoutChangeEvent) => void;
   }> = (props) => {
     return (
-      <WrappedComponents.View
-        layout={itemLayoutAnimation}
-        onLayout={props.onLayout}
-      >
+      <ReanimatedView layout={itemLayoutAnimation} onLayout={props.onLayout}>
         {props.children}
-      </WrappedComponents.View>
+      </ReanimatedView>
     );
   };
 

src/reanimated2/component/Image.ts

@@ -0,0 +1,6 @@
+import { Image } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedImage = createAnimatedComponent(Image as any);
+
+export default AnimatedImage;

src/reanimated2/component/ScrollView.ts

@@ -0,0 +1,6 @@
+import { ScrollView } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedScrollView = createAnimatedComponent(ScrollView);
+
+export default AnimatedScrollView;

src/reanimated2/component/Text.ts

@@ -0,0 +1,6 @@
+import { Text } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedText = createAnimatedComponent(Text as any);
+
+export default AnimatedText;

src/reanimated2/component/View.ts

@@ -0,0 +1,6 @@
+import { View } from 'react-native';
+import createAnimatedComponent from '../../createAnimatedComponent';
+
+const AnimatedView = createAnimatedComponent(View);
+
+export default AnimatedView;

src/reanimated2/js-reanimated/global.ts

@@ -0,0 +1,38 @@
+// In order to keep bundle size down, we treat this file as a polyfill for Web.
+
+import { shouldBeUseWeb } from '../PlatformChecker';
+
+if (shouldBeUseWeb()) {
+  global._frameTimestamp = null;
+  global._setGlobalConsole = (_val) => {
+    // noop
+  };
+  global._measure = () => {
+    console.warn(
+      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
+    );
+    return {
+      x: 0,
+      y: 0,
+      width: 0,
+      height: 0,
+      pageX: 0,
+      pageY: 0,
+    };
+  };
+  global._scrollTo = () => {
+    console.warn(
+      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
+    );
+  };
+  global._dispatchCommand = () => {
+    console.warn(
+      "[Reanimated] You can't use `scrollTo` or `dispatchCommand` methods with Chrome Debugger or with web version"
+    );
+  };
+  global._setGestureState = () => {
+    console.warn(
+      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
+    );
+  };
+}

src/reanimated2/js-reanimated/index.ts

@@ -1,5 +1,4 @@
 import JSReanimated from './JSReanimated';
-import { shouldBeUseWeb } from '../PlatformChecker';
 import { AnimatedStyle, StyleProps } from '../commonTypes';
 
 const reanimatedJS = new JSReanimated();
@@ -13,36 +12,6 @@ interface JSReanimatedComponent {
   };
 }
 
-if (shouldBeUseWeb()) {
-  global._frameTimestamp = null;
-  global._setGlobalConsole = (_val) => {
-    // noop
-  };
-  global._measure = () => {
-    console.warn(
-      "[Reanimated] You can't use `measure` with Chrome Debugger or with web version"
-    );
-    return {
-      x: 0,
-      y: 0,
-      width: 0,
-      height: 0,
-      pageX: 0,
-      pageY: 0,
-    };
-  };
-  global._scrollTo = () => {
-    console.warn(
-      "[Reanimated] You can't use `scrollTo` with Chrome Debugger or with web version"
-    );
-  };
-  global._setGestureState = () => {
-    console.warn(
-      "[Reanimated] You can't use `setGestureState` with Chrome Debugger or with web version"
-    );
-  };
-}
-
 export const _updatePropsJS = (
   updates: StyleProps | AnimatedStyle,
   viewRef: { _component?: JSReanimatedComponent }