diff --git a/.eslintrc.js b/.eslintrc.js index a6e45a54563..d1a7e47de16 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -14,7 +14,9 @@ module.exports = { }, settings: { 'import/resolver': { - 'babel-module': {}, + 'babel-module': { + extensions: ['.js', '.jsx', '.ts', '.tsx'], + }, }, }, rules: { diff --git a/Example/babel.config.js b/Example/babel.config.js index 21d83dc4e5e..c89f9199ce6 100644 --- a/Example/babel.config.js +++ b/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', diff --git a/Example/package.json b/Example/package.json index 712fe8a4e67..8b7b110bffc 100644 --- a/Example/package.json +++ b/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", diff --git a/Example/yarn.lock b/Example/yarn.lock index 8dec70f4204..b551a8ca36f 100644 --- a/Example/yarn.lock +++ b/Example/yarn.lock @@ -858,6 +858,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" @@ -1350,6 +1355,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" diff --git a/FabricExample/package.json b/FabricExample/package.json index f578c5bc2c5..e5b1a220758 100644 --- a/FabricExample/package.json +++ b/FabricExample/package.json @@ -13,6 +13,7 @@ "postinstall": "patch-package && echo 73fa47c9c033e2f1bf10ebab9ac58f02c94ffff9 > ./node_modules/react-native/sdks/.hermesversion" }, "dependencies": { + "@babel/plugin-proposal-export-namespace-from": "^7.17.12", "@react-navigation/native": "^6.0.10", "@react-navigation/native-stack": "^6.6.2", "react": "18.0.0", diff --git a/TVOSExample/babel.config.js b/TVOSExample/babel.config.js index 8f02793ee0f..f76849a605a 100644 --- a/TVOSExample/babel.config.js +++ b/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', diff --git a/TVOSExample/package.json b/TVOSExample/package.json index fc129b9229d..b45b2cbc969 100644 --- a/TVOSExample/package.json +++ b/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", diff --git a/TVOSExample/yarn.lock b/TVOSExample/yarn.lock index 89a898c95cb..acd0b8a4296 100644 --- a/TVOSExample/yarn.lock +++ b/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" diff --git a/__tests__/hooks.useSharedValue.test.js b/__tests__/hooks.useSharedValue.test.js index b796cb52ca3..64d5df51dbe 100644 --- a/__tests__/hooks.useSharedValue.test.js +++ b/__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'); diff --git a/package.json b/package.json index 7eae7d67cfb..d236a17f544 100644 --- a/package.json +++ b/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/", @@ -76,6 +76,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", @@ -158,5 +159,10 @@ "commonjs", "module" ] - } + }, + "sideEffects": [ + "./lib/reanimated2/core", + "./lib/reanimated2/js-reanimated/global", + "./lib/index" + ] } diff --git a/plugin.js b/plugin.js index 0bdd2c1527c..b8c696943be 100644 --- a/plugin.js +++ b/plugin.js @@ -759,6 +759,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() { @@ -781,6 +791,7 @@ module.exports = function ({ types: t }) { processIfGestureHandlerEventCallbackFunctionNode(t, path, state); }, }, + ExportNamedDeclaration: ExportNamedDeclarationFn, }, }; }; diff --git a/src/Animated.js b/src/Animated.js deleted file mode 100644 index 0cc4432bfab..00000000000 --- a/src/Animated.js +++ /dev/null @@ -1,18 +0,0 @@ -import createAnimatedComponent from './createAnimatedComponent'; -import { - addWhitelistedNativeProps, - addWhitelistedUIProps, -} from './ConfigHelper'; -import ReanimatedComponents from './reanimated2/component'; - -const Animated = { - // components - ...ReanimatedComponents, - createAnimatedComponent, - // configuration - addWhitelistedNativeProps, - addWhitelistedUIProps, -}; - -export * from './reanimated2'; -export default Animated; diff --git a/src/Animated.ts b/src/Animated.ts new file mode 100644 index 00000000000..5ad19998dd6 --- /dev/null +++ b/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'; diff --git a/src/index.js b/src/index.js deleted file mode 120000 index 187cf7621a7..00000000000 --- a/src/index.js +++ /dev/null @@ -1 +0,0 @@ -Animated.js \ No newline at end of file diff --git a/src/index.ts b/src/index.ts new file mode 100644 index 00000000000..ad5c7e228d7 --- /dev/null +++ b/src/index.ts @@ -0,0 +1,5 @@ +// tree-shaken side effects +import './reanimated2/js-reanimated/global'; + +export * from './reanimated2'; +export * as default from './Animated'; diff --git a/src/reanimated2/component/FlatList.tsx b/src/reanimated2/component/FlatList.tsx index 08498aed145..aacb5af53e4 100644 --- a/src/reanimated2/component/FlatList.tsx +++ b/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'; @@ -15,11 +15,9 @@ interface AnimatedFlatListProps { const createCellRenderer = (itemLayoutAnimation?: ILayoutAnimationBuilder) => { const cellRenderer = (props: AnimatedFlatListProps) => { return ( - + {props.children} - + ); }; diff --git a/src/reanimated2/component/Image.ts b/src/reanimated2/component/Image.ts new file mode 100644 index 00000000000..88d4f46ebf7 --- /dev/null +++ b/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; diff --git a/src/reanimated2/component/ScrollView.ts b/src/reanimated2/component/ScrollView.ts new file mode 100644 index 00000000000..590d401b21d --- /dev/null +++ b/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; diff --git a/src/reanimated2/component/Text.ts b/src/reanimated2/component/Text.ts new file mode 100644 index 00000000000..fa03356fa2b --- /dev/null +++ b/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; diff --git a/src/reanimated2/component/View.ts b/src/reanimated2/component/View.ts new file mode 100644 index 00000000000..cee6dc09939 --- /dev/null +++ b/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; diff --git a/src/reanimated2/component/WrappedComponents.ts b/src/reanimated2/component/WrappedComponents.ts deleted file mode 100644 index d0271df7aa5..00000000000 --- a/src/reanimated2/component/WrappedComponents.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { Image, ScrollView, Text, View } from 'react-native'; -import createAnimatedComponent from '../../createAnimatedComponent'; - -const WrappedComponents = { - View: createAnimatedComponent(View), - Text: createAnimatedComponent(Text as any), - Image: createAnimatedComponent(Image as any), - ScrollView: createAnimatedComponent(ScrollView), -}; - -export default WrappedComponents; diff --git a/src/reanimated2/component/index.ts b/src/reanimated2/component/index.ts deleted file mode 100644 index fa69f5554e3..00000000000 --- a/src/reanimated2/component/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -import ReanimatedFlatlist from './FlatList'; -import WrappedComponents from './WrappedComponents'; - -const ReanimatedComponents = { - ...WrappedComponents, - FlatList: ReanimatedFlatlist, -}; - -export default ReanimatedComponents; diff --git a/src/reanimated2/js-reanimated/global.ts b/src/reanimated2/js-reanimated/global.ts new file mode 100644 index 00000000000..b7f5febfc89 --- /dev/null +++ b/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" + ); + }; +} diff --git a/src/reanimated2/js-reanimated/index.ts b/src/reanimated2/js-reanimated/index.ts index 0cdf160ef1b..631b20a6943 100644 --- a/src/reanimated2/js-reanimated/index.ts +++ b/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,41 +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._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" - ); - }; -} - export const _updatePropsJS = ( updates: StyleProps | AnimatedStyle, viewRef: { _component?: JSReanimatedComponent } diff --git a/tsconfig.json b/tsconfig.json index 04141038ee8..ecdf4c77436 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -4,7 +4,7 @@ "declaration": false, "preserveSymlinks": true, "target": "es6", - "module": "es6", + "module": "ESNext", "jsx": "react-native", "skipLibCheck": true, "allowSyntheticDefaultImports": true, @@ -12,11 +12,7 @@ "lib": ["es6", "dom"], "esModuleInterop": true, "strict": true, - "forceConsistentCasingInFileNames": true, + "forceConsistentCasingInFileNames": true }, - "include": [ - "lib/**/*.ts", - "lib/**/*.tsx", - "react-native-reanimated.d.ts" - ] + "include": ["lib/**/*.ts", "lib/**/*.tsx", "react-native-reanimated.d.ts"] } diff --git a/yarn.lock b/yarn.lock index efb3d9d7f53..cd9f4da4c3d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -388,6 +388,11 @@ 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.8.0", "@babel/helper-plugin-utils@^7.8.3": version "7.8.3" resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.8.3.tgz" @@ -632,6 +637,14 @@ "@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-json-strings@^7.16.7": version "7.16.7" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.16.7.tgz#9732cb1d17d9a2626a08c5be25186c195b6fa6e8"