[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

@@ -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"
   ]
 }

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",

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');
 "
 `;

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
 });

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

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",

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
 };

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: [

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')
     }),

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",

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;

packages/react-native-web/src/module.js

@@ -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
-};

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' }]
+  ]
+};