Change babel presets

Tune the compiled output to reduce file size.

.babelrc

@@ -1,8 +1,34 @@
 {
   "presets": [
-    "react-native"
+    [
+      "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": [
-    [ "transform-react-remove-prop-types", { "mode": "wrap" } ]
+    ["babel-plugin-transform-class-properties", { "loose": true }],
+    ["babel-plugin-transform-object-rest-spread", { "useBuiltIns": true }],
+    ["babel-plugin-transform-react-remove-prop-types", { "mode": "wrap" } ]
   ]
 }

package.json

@@ -24,7 +24,12 @@
     "babel-core": "^6.26.0",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.10",
+    "babel-preset-env": "^1.6.1",
+    "babel-preset-flow": "^6.23.0",
+    "babel-preset-react": "^6.24.1",
     "babel-preset-react-native": "^4.0.0",
     "caniuse-api": "^2.0.0",
     "del-cli": "^1.1.0",

packages/benchmarks/webpack.config.js

@@ -2,11 +2,13 @@
 const path = require('path');
 const webpack = require('webpack');
 
+const appDirectory = path.resolve(__dirname);
+
 module.exports = {
   context: __dirname,
   entry: ['babel-polyfill', './src/index'],
   output: {
-    path: path.resolve(__dirname, 'dist'),
+    path: path.resolve(appDirectory, 'dist'),
     filename: 'performance.bundle.js'
   },
   module: {
@@ -23,7 +25,9 @@ module.exports = {
       },
       {
         test: /\.js$/,
-        exclude: /node_modules/,
+        include: [
+          path.resolve(appDirectory, 'src'),
+        ],
         use: {
           loader: 'babel-loader',
           options: {

packages/react-native-web/package.json

@@ -3,6 +3,7 @@
   "version": "0.2.2",
   "description": "React Native for Web",
   "main": "dist/index.js",
+  "module": "dist/module.js",
   "files": [
     "dist",
     "jest",

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

@@ -1,2 +1,2 @@
-import ReactNative from './module';
-module.exports = ReactNative;
+import * as ReactNative from './module';
+export default ReactNative;

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

@@ -128,75 +128,3 @@ export {
   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;

website/guides/getting-started.md

@@ -14,20 +14,9 @@ which has built-in React Native for Web support (once you install
 
 ## Adding to an existing web app
 
-Add the `react-native-web` plugin to your Babel configuration. This will
-alias `react-native` to `react-native-web` and exclude any modules not required
-by the app.
-
-```json
-{
-  "presets": [
-    "react-native"
-  ],
-  "plugins": [
-    "react-native-web"
-  ]
-}
-```
+Add [`babel-plugin-react-native-web`](https://www.npmjs.com/package/babel-plugin-react-native-web)
+to your Babel configuration. This will alias `react-native` to
+`react-native-web` and exclude any modules not required by the app.
 
 ## Client-side rendering
 
@@ -190,10 +179,11 @@ const babelLoaderConfiguration = {
     loader: 'babel-loader',
     options: {
       cacheDirectory: true,
+      // Babel configuration (or use .babelrc)
       // This aliases 'react-native' to 'react-native-web' and includes only
       // the modules needed by the app.
       plugins: ['react-native-web', 'transform-runtime'],
-      // The 'react-native' preset is recommended (or use your own .babelrc).
+      // The 'react-native' preset is recommended to match React Native's packager
       presets: ['react-native']
     }
   }

website/package.json

@@ -15,6 +15,7 @@
     "react-native-web": "^0.2.2"
   },
   "devDependencies": {
+    "babel-plugin-react-native-web": "^0.2.2",
     "url-loader": "^0.6.2",
     "webpack": "^3.10.0"
   }

yarn.lock

@@ -1336,7 +1336,7 @@ babel-plugin-transform-object-assign@^6.5.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.5.0:
+babel-plugin-transform-object-rest-spread@6.26.0, babel-plugin-transform-object-rest-spread@^6.22.0, babel-plugin-transform-object-rest-spread@^6.26.0, babel-plugin-transform-object-rest-spread@^6.5.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-transform-object-rest-spread/-/babel-plugin-transform-object-rest-spread-6.26.0.tgz#0f36692d50fef6b7e2d4b3ac1478137a963b7b06"
   dependencies: