From 209bd3aee1e6ed115b9c0c5b3afe2f7cefccba9f Mon Sep 17 00:00:00 2001 From: Nicolas Gallagher Date: Mon, 1 Jan 2018 12:01:22 -0800 Subject: [PATCH] [fix] babel-plugin support for 'react-native-web' module name Now rewrites import/export/require statements from 'react-native-web'. Install the plugin in the 'benchmarks' package. --- .babelrc | 31 +-- package.json | 2 +- .../__snapshots__/index-test.js.snap | 202 ++++++------------ .../src/__tests__/index-test.js | 79 ++++--- .../src/index.js | 38 ++-- packages/benchmarks/package.json | 1 + .../implementations/react-native-web/index.js | 2 - packages/benchmarks/src/index.js | 2 - packages/benchmarks/webpack.config.js | 19 +- packages/react-native-web/package.json | 2 - packages/react-native-web/src/index.js | 198 ++++++++++++++++- packages/react-native-web/src/module.js | 130 ----------- scripts/babel/preset.js | 34 +++ 13 files changed, 372 insertions(+), 368 deletions(-) delete mode 100644 packages/react-native-web/src/module.js create mode 100644 scripts/babel/preset.js diff --git a/.babelrc b/.babelrc index 69f760fd..ebd1c7ca 100644 --- a/.babelrc +++ b/.babelrc @@ -1,34 +1,5 @@ { "presets": [ - [ - "babel-preset-env", - { - "loose": true, - "exclude": ["transform-es2015-typeof-symbol"], - "targets": { - "browsers": [ - "chrome 38", - "android 4", - "firefox 40", - "ios_saf 7", - "safari 7", - "ie 10", - "ie_mob 11", - "edge 12", - "opera 16", - "op_mini 12", - "and_uc 9", - "and_chr 38" - ] - } - } - ], - "babel-preset-react", - "babel-preset-flow" - ], - "plugins": [ - ["babel-plugin-transform-class-properties", { "loose": true }], - ["babel-plugin-transform-object-rest-spread", { "useBuiltIns": true }], - ["babel-plugin-transform-react-remove-prop-types", { "mode": "wrap" } ] + "./scripts/babel/preset" ] } diff --git a/package.json b/package.json index 28557062..de6a36a2 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "scripts": { "benchmark": "cd packages/benchmarks && yarn benchmark", "clean": "del ./packages/*/dist", - "compile": "yarn clean && cd packages/react-native-web && babel src --optional runtime --out-dir dist --ignore \"__tests__\"", + "compile": "yarn clean && cd packages/react-native-web && babel src --out-dir dist --ignore \"**/__tests__\"", "docs:start": "cd website && yarn start", "docs:release": "cd website && yarn release", "flow": "flow", diff --git a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap index d600ad83..308fbcc4 100644 --- a/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap +++ b/packages/babel-plugin-react-native-web/src/__tests__/__snapshots__/index-test.js.snap @@ -1,161 +1,91 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`1. Rewrite react-native paths for react-native-web 1`] = ` -" -import { View } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -import View from 'react-native-web/dist/components/View'; -" -`; - -exports[`2. Rewrite react-native paths for react-native-web 1`] = ` -" -import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -import Switch from 'react-native-web/dist/components/Switch'; -import Text from 'react-native-web/dist/components/Text'; -import MyView from 'react-native-web/dist/components/View'; -import ViewPropTypes from 'react-native-web/dist/components/View/ViewPropTypes'; -" -`; - -exports[`3. Rewrite react-native paths for react-native-web 1`] = ` -" -import { createElement, Switch, StyleSheet } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -import createElement from 'react-native-web/dist/modules/createElement'; -import Switch from 'react-native-web/dist/components/Switch'; -import StyleSheet from 'react-native-web/dist/apis/StyleSheet'; -" -`; - -exports[`4. Rewrite react-native paths for react-native-web 1`] = ` -" -import { InvalidThing, TouchableOpacity } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -import { InvalidThing } from 'react-native-web'; -import TouchableOpacity from 'react-native-web/dist/components/Touchable/TouchableOpacity'; -" -`; - -exports[`5. Rewrite react-native paths for react-native-web 1`] = ` -" -import * as RNW from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -import * as RNW from 'react-native-web'; -" -`; - -exports[`6. Rewrite react-native paths for react-native-web 1`] = ` -" -const { View } = require('react-native'); - - ↓ ↓ ↓ ↓ ↓ ↓ - -const View = require('react-native-web/dist/components/View'); -" -`; - -exports[`7. Rewrite react-native paths for react-native-web 1`] = ` -" -let { Switch, Text, View: MyView } = require('react-native'); - - ↓ ↓ ↓ ↓ ↓ ↓ - -let Switch = require('react-native-web/dist/components/Switch'); - -let Text = require('react-native-web/dist/components/Text'); - -let MyView = require('react-native-web/dist/components/View'); -" -`; - -exports[`8. Rewrite react-native paths for react-native-web 1`] = ` -" -var { createElement, Switch, StyleSheet } = require('react-native'); - - ↓ ↓ ↓ ↓ ↓ ↓ - -var createElement = require('react-native-web/dist/modules/createElement'); - -var Switch = require('react-native-web/dist/components/Switch'); - -var StyleSheet = require('react-native-web/dist/apis/StyleSheet'); -" -`; - -exports[`9. Rewrite react-native paths for react-native-web 1`] = ` -" -const { InvalidThing, TouchableOpacity } = require('react-native'); - - ↓ ↓ ↓ ↓ ↓ ↓ - -const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity'); -" -`; - -exports[`10. Rewrite react-native paths for react-native-web 1`] = ` +exports[`export from "react-native" 1`] = ` " export { View } from 'react-native'; +export { ColorPropType, StyleSheet, Text, createElement } from 'react-native'; ↓ ↓ ↓ ↓ ↓ ↓ export { default as View } from 'react-native-web/dist/components/View'; -" -`; - -exports[`11. Rewrite react-native paths for react-native-web 1`] = ` -" -export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -export { default as Switch } from 'react-native-web/dist/components/Switch'; -export { default as Text } from 'react-native-web/dist/components/Text'; -export { default as MyView } from 'react-native-web/dist/components/View'; -export { default as ViewPropTypes } from 'react-native-web/dist/components/View/ViewPropTypes'; -" -`; - -exports[`12. Rewrite react-native paths for react-native-web 1`] = ` -" -export { createElement, Switch, StyleSheet } from 'react-native'; - - ↓ ↓ ↓ ↓ ↓ ↓ - -export { default as createElement } from 'react-native-web/dist/modules/createElement'; -export { default as Switch } from 'react-native-web/dist/components/Switch'; +export { default as ColorPropType } from 'react-native-web/dist/propTypes/ColorPropType'; export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet'; +export { default as Text } from 'react-native-web/dist/components/Text'; +export { default as createElement } from 'react-native-web/dist/modules/createElement'; " `; -exports[`13. Rewrite react-native paths for react-native-web 1`] = ` +exports[`export from "react-native-web" 1`] = ` " -export { InvalidThing, TouchableOpacity } from 'react-native'; +export { View } from 'react-native-web'; +export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web'; ↓ ↓ ↓ ↓ ↓ ↓ -export { InvalidThing } from 'react-native-web'; -export { default as TouchableOpacity } from 'react-native-web/dist/components/Touchable/TouchableOpacity'; +export { default as View } from 'react-native-web/dist/components/View'; +export { default as ColorPropType } from 'react-native-web/dist/propTypes/ColorPropType'; +export { default as StyleSheet } from 'react-native-web/dist/apis/StyleSheet'; +export { default as Text } from 'react-native-web/dist/components/Text'; +export { default as createElement } from 'react-native-web/dist/modules/createElement'; " `; -exports[`14. Rewrite react-native paths for react-native-web 1`] = ` +exports[`import from "native-native" 1`] = ` " -export { default as RNW } from 'react-native'; +import ReactNative from 'react-native'; +import { View } from 'react-native'; +import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import * as ReactNativeModules from 'react-native'; ↓ ↓ ↓ ↓ ↓ ↓ -export { default as RNW } from 'react-native-web'; +import ReactNative from 'react-native-web/dist/index'; +import View from 'react-native-web/dist/components/View'; +import { Invalid } from 'react-native-web/dist/index'; +import MyView from 'react-native-web/dist/components/View'; +import ViewPropTypes from 'react-native-web/dist/components/View/ViewPropTypes'; +import * as ReactNativeModules from 'react-native-web/dist/index'; +" +`; + +exports[`import from "react-native-web" 1`] = ` +" +import { createElement } from 'react-native-web'; +import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; +import * as ReactNativeModules from 'react-native-web'; + + ↓ ↓ ↓ ↓ ↓ ↓ + +import createElement from 'react-native-web/dist/modules/createElement'; +import ColorPropType from 'react-native-web/dist/propTypes/ColorPropType'; +import StyleSheet from 'react-native-web/dist/apis/StyleSheet'; +import View from 'react-native-web/dist/components/View'; +import TouchableOpacity from 'react-native-web/dist/components/Touchable/TouchableOpacity'; +import processColor from 'react-native-web/dist/modules/processColor'; +import * as ReactNativeModules from 'react-native-web/dist/index'; +" +`; + +exports[`require "react-native-web" 1`] = ` +" +const ReactNative = require('react-native-web'); +const { createElement } = require('react-native-web'); +const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web'); + + ↓ ↓ ↓ ↓ ↓ ↓ + +const ReactNative = require('react-native-web'); + +const createElement = require('react-native-web/dist/modules/createElement'); + +const ColorPropType = require('react-native-web/dist/propTypes/ColorPropType'); + +const StyleSheet = require('react-native-web/dist/apis/StyleSheet'); + +const View = require('react-native-web/dist/components/View'); + +const TouchableOpacity = require('react-native-web/dist/components/Touchable/TouchableOpacity'); + +const processColor = require('react-native-web/dist/modules/processColor'); " `; diff --git a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js index 0d40a6e3..1b762343 100644 --- a/packages/babel-plugin-react-native-web/src/__tests__/index-test.js +++ b/packages/babel-plugin-react-native-web/src/__tests__/index-test.js @@ -1,46 +1,45 @@ const plugin = require('..'); const pluginTester = require('babel-plugin-tester'); +const tests = [ + // import react-native + { + title: 'import from "native-native"', + code: `import ReactNative from 'react-native'; +import { View } from 'react-native'; +import { Invalid, View as MyView, ViewPropTypes } from 'react-native'; +import * as ReactNativeModules from 'react-native';`, + snapshot: true + }, + { + title: 'import from "react-native-web"', + code: `import { createElement } from 'react-native-web'; +import { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } from 'react-native-web'; +import * as ReactNativeModules from 'react-native-web';`, + snapshot: true + }, + { + title: 'export from "react-native"', + code: `export { View } from 'react-native'; +export { ColorPropType, StyleSheet, Text, createElement } from 'react-native';`, + snapshot: true + }, + { + title: 'export from "react-native-web"', + code: `export { View } from 'react-native-web'; +export { ColorPropType, StyleSheet, Text, createElement } from 'react-native-web';`, + snapshot: true + }, + { + title: 'require "react-native-web"', + code: `const ReactNative = require('react-native-web'); +const { createElement } = require('react-native-web'); +const { ColorPropType, StyleSheet, View, TouchableOpacity, processColor } = require('react-native-web');`, + snapshot: true + } +]; + pluginTester({ plugin, - snapshot: true, - tests: [ - // import react-native - "import { View } from 'react-native';", - "import { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';", - "import { createElement, Switch, StyleSheet } from 'react-native';", - "import { InvalidThing, TouchableOpacity } from 'react-native';", - "import * as RNW from 'react-native';", - - // import react-native-web - // "import { View } from 'react-native-web';", - // "import { Switch, Text, View as MyView } from 'react-native-web';", - // "import { createElement, Switch, StyleSheet } from 'react-native-web';", - // "import { InvalidThing, TouchableOpacity } from 'react-native-web';", - // "import * as RNW from 'react-native-web';", - - // require react-native - "const { View } = require('react-native');", - "let { Switch, Text, View: MyView } = require('react-native');", - "var { createElement, Switch, StyleSheet } = require('react-native');", - "const { InvalidThing, TouchableOpacity } = require('react-native');", - - // require react-native-web - // "const { View } = require('react-native-web');", - // "let { Switch, Text, View: MyView } = require('react-native-web');", - // "var { createElement, Switch, StyleSheet } = require('react-native-web');", - // "const { InvalidThing, TouchableOpacity } = require('react-native-web');", - - // export react-native - "export { View } from 'react-native';", - "export { Switch, Text, View as MyView, ViewPropTypes } from 'react-native';", - "export { createElement, Switch, StyleSheet } from 'react-native';", - "export { InvalidThing, TouchableOpacity } from 'react-native';", - "export { default as RNW } from 'react-native';", - { - code: "const RNW = require('react-native');", - output: "const RNW = require('react-native');", - snapshot: false - } - ] + tests }); diff --git a/packages/babel-plugin-react-native-web/src/index.js b/packages/babel-plugin-react-native-web/src/index.js index 0bb41c38..4200a0e2 100644 --- a/packages/babel-plugin-react-native-web/src/index.js +++ b/packages/babel-plugin-react-native-web/src/index.js @@ -97,17 +97,22 @@ const isReactNativeRequire = (t, node) => { t.isIdentifier(init.callee) && init.callee.name === 'require' && init.arguments.length === 1 && - init.arguments[0].value === 'react-native' + (init.arguments[0].value === 'react-native' || init.arguments[0].value === 'react-native-web') ); }; +const isReactNativeModule = ({ source, specifiers }) => + source && + (source.value === 'react-native' || source.value === 'react-native-web') && + specifiers.length; + module.exports = function({ types: t }) { return { - name: 'Rewrite react-native paths for react-native-web', + name: 'Rewrite react-native to react-native-web', visitor: { - ImportDeclaration(path) { - const { source, specifiers } = path.node; - if (source && source.value === 'react-native' && specifiers.length) { + ImportDeclaration(path, state) { + const { specifiers } = path.node; + if (isReactNativeModule(path.node)) { const imports = specifiers .map(specifier => { if (t.isImportSpecifier(specifier)) { @@ -121,16 +126,19 @@ module.exports = function({ types: t }) { ); } } - return t.importDeclaration([specifier], t.stringLiteral('react-native-web')); + return t.importDeclaration( + [specifier], + t.stringLiteral('react-native-web/dist/index') + ); }) .filter(Boolean); path.replaceWithMultiple(imports); } }, - ExportNamedDeclaration(path) { - const { source, specifiers } = path.node; - if (source && source.value === 'react-native' && specifiers.length) { + ExportNamedDeclaration(path, state) { + const { specifiers } = path.node; + if (isReactNativeModule(path.node)) { const exports = specifiers .map(specifier => { if (t.isExportSpecifier(specifier)) { @@ -145,19 +153,19 @@ module.exports = function({ types: t }) { t.stringLiteral(distLocation) ); } - return t.exportNamedDeclaration( - null, - [specifier], - t.stringLiteral('react-native-web') - ); } + return t.exportNamedDeclaration( + null, + [specifier], + t.stringLiteral('react-native-web/dist/index') + ); }) .filter(Boolean); path.replaceWithMultiple(exports); } }, - VariableDeclaration(path) { + VariableDeclaration(path, state) { if (isReactNativeRequire(t, path.node)) { const { id } = path.node.declarations[0]; const imports = id.properties diff --git a/packages/benchmarks/package.json b/packages/benchmarks/package.json index 9c3e3df0..fd01e704 100644 --- a/packages/benchmarks/package.json +++ b/packages/benchmarks/package.json @@ -24,6 +24,7 @@ "styletron-utils": "^3.0.0-rc.3" }, "devDependencies": { + "babel-plugin-react-native-web": "^0.2.2", "css-loader": "^0.28.7", "style-loader": "^0.19.1", "webpack": "^3.10.0", diff --git a/packages/benchmarks/src/implementations/react-native-web/index.js b/packages/benchmarks/src/implementations/react-native-web/index.js index b6484e01..3d8101c2 100644 --- a/packages/benchmarks/src/implementations/react-native-web/index.js +++ b/packages/benchmarks/src/implementations/react-native-web/index.js @@ -1,11 +1,9 @@ import Box from './Box'; import Dot from './Dot'; -import Tweet from './Tweet'; import { View } from 'react-native'; export default { Box, Dot, - Tweet, View }; diff --git a/packages/benchmarks/src/index.js b/packages/benchmarks/src/index.js index e829fd3b..a969d845 100644 --- a/packages/benchmarks/src/index.js +++ b/packages/benchmarks/src/index.js @@ -12,7 +12,6 @@ import styletron from './implementations/styletron'; import renderDeepTree from './cases/renderDeepTree'; import renderSierpinskiTriangle from './cases/renderSierpinskiTriangle'; -// import renderTweet from './cases/renderTweet'; import renderWideTree from './cases/renderWideTree'; const testMatrix = { @@ -29,7 +28,6 @@ const testMatrix = { () => renderDeepTree('react-native-web', reactNativeWeb), () => renderWideTree('react-native-web', reactNativeWeb), () => renderSierpinskiTriangle('react-native-web', reactNativeWeb) - // () => renderTweet('react-native-web', reactNativeWeb) ], aphrodite: [ diff --git a/packages/benchmarks/webpack.config.js b/packages/benchmarks/webpack.config.js index 8404de70..4c56bdf1 100644 --- a/packages/benchmarks/webpack.config.js +++ b/packages/benchmarks/webpack.config.js @@ -1,4 +1,5 @@ -// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; +const babelPreset = require('../../scripts/babel/preset'); +const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; const path = require('path'); const webpack = require('webpack'); @@ -25,23 +26,23 @@ module.exports = { }, { test: /\.js$/, - include: [ - path.resolve(appDirectory, 'src'), - ], + include: [path.resolve(appDirectory, 'src')], use: { loader: 'babel-loader', options: { - cacheDirectory: true + cacheDirectory: true, + presets: babelPreset, + plugins: ['react-native-web'] } } } ] }, plugins: [ - // new BundleAnalyzerPlugin({ - // analyzerMode: 'static', - // openAnalyzer: false - // }), + new BundleAnalyzerPlugin({ + analyzerMode: 'static', + openAnalyzer: false + }), new webpack.DefinePlugin({ 'process.env.NODE_ENV': JSON.stringify('production') }), diff --git a/packages/react-native-web/package.json b/packages/react-native-web/package.json index 00cd58b9..91a5c6fd 100644 --- a/packages/react-native-web/package.json +++ b/packages/react-native-web/package.json @@ -3,7 +3,6 @@ "version": "0.2.2", "description": "React Native for Web", "main": "dist/index.js", - "module": "dist/module.js", "files": [ "dist", "jest", @@ -12,7 +11,6 @@ ], "dependencies": { "array-find-index": "^1.0.2", - "babel-runtime": "^6.26.0", "create-react-class": "^15.6.2", "debounce": "^1.1.0", "deep-assign": "^2.0.0", diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js index 10d47cc9..0306dd63 100644 --- a/packages/react-native-web/src/index.js +++ b/packages/react-native-web/src/index.js @@ -1,2 +1,198 @@ -import * as ReactNative from './module'; +import createElement from './modules/createElement'; +import findNodeHandle from './modules/findNodeHandle'; +import NativeModules from './modules/NativeModules'; +import processColor from './modules/processColor'; +import render from './modules/render'; +import unmountComponentAtNode from './modules/unmountComponentAtNode'; + +// APIs +import Animated from './apis/Animated'; +import AppRegistry from './apis/AppRegistry'; +import AppState from './apis/AppState'; +import AsyncStorage from './apis/AsyncStorage'; +import BackHandler from './apis/BackHandler'; +import Clipboard from './apis/Clipboard'; +import Dimensions from './apis/Dimensions'; +import Easing from './apis/Easing'; +import I18nManager from './apis/I18nManager'; +import Keyboard from './apis/Keyboard'; +import InteractionManager from './apis/InteractionManager'; +import Linking from './apis/Linking'; +import NetInfo from './apis/NetInfo'; +import PanResponder from './apis/PanResponder'; +import PixelRatio from './apis/PixelRatio'; +import Platform from './apis/Platform'; +import StyleSheet from './apis/StyleSheet'; +import UIManager from './apis/UIManager'; +import Vibration from './apis/Vibration'; + +// components +import ActivityIndicator from './components/ActivityIndicator'; +import ART from './components/ART'; +import Button from './components/Button'; +import CheckBox from './components/CheckBox'; +import FlatList from './components/FlatList'; +import Image from './components/Image'; +import ImageBackground from './components/Image/ImageBackground'; +import KeyboardAvoidingView from './components/KeyboardAvoidingView'; +import ListView from './components/ListView'; +import Modal from './components/Modal'; +import Picker from './components/Picker'; +import ProgressBar from './components/ProgressBar'; +import RefreshControl from './components/RefreshControl'; +import SafeAreaView from './components/SafeAreaView'; +import ScrollView from './components/ScrollView'; +import SectionList from './components/SectionList'; +import Slider from './components/Slider'; +import StatusBar from './components/StatusBar'; +import Switch from './components/Switch'; +import Text from './components/Text'; +import TextInput from './components/TextInput'; +import Touchable from './components/Touchable/Touchable'; +import TouchableHighlight from './components/Touchable/TouchableHighlight'; +import TouchableNativeFeedback from './components/Touchable/TouchableNativeFeedback'; +import TouchableOpacity from './components/Touchable/TouchableOpacity'; +import TouchableWithoutFeedback from './components/Touchable/TouchableWithoutFeedback'; +import View from './components/View'; +import VirtualizedList from './components/VirtualizedList'; + +// propTypes +import ColorPropType from './propTypes/ColorPropType'; +import EdgeInsetsPropType from './propTypes/EdgeInsetsPropType'; +import PointPropType from './propTypes/PointPropType'; +import TextPropTypes from './components/Text/TextPropTypes'; +import ViewPropTypes from './components/View/ViewPropTypes'; + +export { + // top-level API + findNodeHandle, + render, + unmountComponentAtNode, + // modules + createElement, + NativeModules, + processColor, + // APIs + Animated, + AppRegistry, + AppState, + AsyncStorage, + BackHandler, + Clipboard, + Dimensions, + Easing, + I18nManager, + InteractionManager, + Keyboard, + Linking, + NetInfo, + PanResponder, + PixelRatio, + Platform, + StyleSheet, + UIManager, + Vibration, + // components + ActivityIndicator, + ART, + Button, + CheckBox, + FlatList, + Image, + ImageBackground, + KeyboardAvoidingView, + ListView, + Modal, + Picker, + ProgressBar, + RefreshControl, + SafeAreaView, + ScrollView, + SectionList, + Slider, + StatusBar, + Switch, + Text, + TextInput, + Touchable, + TouchableHighlight, + TouchableNativeFeedback, + TouchableOpacity, + TouchableWithoutFeedback, + View, + VirtualizedList, + // propTypes + ColorPropType, + EdgeInsetsPropType, + PointPropType, + TextPropTypes, + ViewPropTypes +}; + +const ReactNative = { + // top-level API + findNodeHandle, + render, + unmountComponentAtNode, + // modules + createElement, + NativeModules, + processColor, + // APIs + Animated, + AppRegistry, + AppState, + AsyncStorage, + BackHandler, + Clipboard, + Dimensions, + Easing, + I18nManager, + InteractionManager, + Keyboard, + Linking, + NetInfo, + PanResponder, + PixelRatio, + Platform, + StyleSheet, + UIManager, + Vibration, + // components + ActivityIndicator, + ART, + Button, + CheckBox, + FlatList, + Image, + ImageBackground, + KeyboardAvoidingView, + ListView, + Modal, + Picker, + ProgressBar, + RefreshControl, + SafeAreaView, + ScrollView, + SectionList, + Slider, + StatusBar, + Switch, + Text, + TextInput, + Touchable, + TouchableHighlight, + TouchableNativeFeedback, + TouchableOpacity, + TouchableWithoutFeedback, + View, + VirtualizedList, + // propTypes + ColorPropType, + EdgeInsetsPropType, + PointPropType, + TextPropTypes, + ViewPropTypes +}; + export default ReactNative; diff --git a/packages/react-native-web/src/module.js b/packages/react-native-web/src/module.js deleted file mode 100644 index fa585deb..00000000 --- a/packages/react-native-web/src/module.js +++ /dev/null @@ -1,130 +0,0 @@ -import createElement from './modules/createElement'; -import findNodeHandle from './modules/findNodeHandle'; -import NativeModules from './modules/NativeModules'; -import processColor from './modules/processColor'; -import render from './modules/render'; -import unmountComponentAtNode from './modules/unmountComponentAtNode'; - -// APIs -import Animated from './apis/Animated'; -import AppRegistry from './apis/AppRegistry'; -import AppState from './apis/AppState'; -import AsyncStorage from './apis/AsyncStorage'; -import BackHandler from './apis/BackHandler'; -import Clipboard from './apis/Clipboard'; -import Dimensions from './apis/Dimensions'; -import Easing from './apis/Easing'; -import I18nManager from './apis/I18nManager'; -import Keyboard from './apis/Keyboard'; -import InteractionManager from './apis/InteractionManager'; -import Linking from './apis/Linking'; -import NetInfo from './apis/NetInfo'; -import PanResponder from './apis/PanResponder'; -import PixelRatio from './apis/PixelRatio'; -import Platform from './apis/Platform'; -import StyleSheet from './apis/StyleSheet'; -import UIManager from './apis/UIManager'; -import Vibration from './apis/Vibration'; - -// components -import ActivityIndicator from './components/ActivityIndicator'; -import ART from './components/ART'; -import Button from './components/Button'; -import CheckBox from './components/CheckBox'; -import FlatList from './components/FlatList'; -import Image from './components/Image'; -import ImageBackground from './components/Image/ImageBackground'; -import KeyboardAvoidingView from './components/KeyboardAvoidingView'; -import ListView from './components/ListView'; -import Modal from './components/Modal'; -import Picker from './components/Picker'; -import ProgressBar from './components/ProgressBar'; -import RefreshControl from './components/RefreshControl'; -import SafeAreaView from './components/SafeAreaView'; -import ScrollView from './components/ScrollView'; -import SectionList from './components/SectionList'; -import Slider from './components/Slider'; -import StatusBar from './components/StatusBar'; -import Switch from './components/Switch'; -import Text from './components/Text'; -import TextInput from './components/TextInput'; -import Touchable from './components/Touchable/Touchable'; -import TouchableHighlight from './components/Touchable/TouchableHighlight'; -import TouchableNativeFeedback from './components/Touchable/TouchableNativeFeedback'; -import TouchableOpacity from './components/Touchable/TouchableOpacity'; -import TouchableWithoutFeedback from './components/Touchable/TouchableWithoutFeedback'; -import View from './components/View'; -import VirtualizedList from './components/VirtualizedList'; - -// propTypes -import ColorPropType from './propTypes/ColorPropType'; -import EdgeInsetsPropType from './propTypes/EdgeInsetsPropType'; -import PointPropType from './propTypes/PointPropType'; -import TextPropTypes from './components/Text/TextPropTypes'; -import ViewPropTypes from './components/View/ViewPropTypes'; - -export { - // top-level API - findNodeHandle, - render, - unmountComponentAtNode, - // modules - createElement, - NativeModules, - processColor, - // APIs - Animated, - AppRegistry, - AppState, - AsyncStorage, - BackHandler, - Clipboard, - Dimensions, - Easing, - I18nManager, - InteractionManager, - Keyboard, - Linking, - NetInfo, - PanResponder, - PixelRatio, - Platform, - StyleSheet, - UIManager, - Vibration, - // components - ActivityIndicator, - ART, - Button, - CheckBox, - FlatList, - Image, - ImageBackground, - KeyboardAvoidingView, - ListView, - Modal, - Picker, - ProgressBar, - RefreshControl, - SafeAreaView, - ScrollView, - SectionList, - Slider, - StatusBar, - Switch, - Text, - TextInput, - Touchable, - TouchableHighlight, - TouchableNativeFeedback, - TouchableOpacity, - TouchableWithoutFeedback, - View, - VirtualizedList, - // propTypes - ColorPropType, - EdgeInsetsPropType, - PointPropType, - TextPropTypes, - ViewPropTypes -}; diff --git a/scripts/babel/preset.js b/scripts/babel/preset.js new file mode 100644 index 00000000..4caedff0 --- /dev/null +++ b/scripts/babel/preset.js @@ -0,0 +1,34 @@ +module.exports = { + presets: [ + [ + 'babel-preset-env', + { + loose: true, + exclude: ['transform-es2015-typeof-symbol'], + targets: { + browsers: [ + 'chrome 38', + 'android 4', + 'firefox 40', + 'ios_saf 7', + 'safari 7', + 'ie 10', + 'ie_mob 11', + 'edge 12', + 'opera 16', + 'op_mini 12', + 'and_uc 9', + 'and_chr 38' + ] + } + } + ], + 'babel-preset-react', + 'babel-preset-flow' + ], + plugins: [ + ['babel-plugin-transform-class-properties', { loose: true }], + ['babel-plugin-transform-object-rest-spread', { useBuiltIns: true }], + ['babel-plugin-transform-react-remove-prop-types', { mode: 'wrap' }] + ] +};