From a66fad52b65874abcfc1ac79da81057279dd5dac Mon Sep 17 00:00:00 2001
From: Christopher Chedeau <vjeux@fb.com>
Date: Sat, 21 Mar 2015 10:07:45 -0700
Subject: [PATCH] Updates from Fri 20 Mar

- declare timeoutID | Basil Hosmer
- [react-packager] Allow entry point extensions like .ios.js | Amjad Masad
- [react-native] Use SpreadProperty to make react-docgen happy | Felix Kling
- clean Examples/2048 | Basil Hosmer
- [ReactNative] Adjust packager default root when running from within node_modules | Alex Kotliarskyi
- [ReactNative] Add missing websocket dependency | Alex Kotliarskyi
- [react-packager] change all but one `ix` to `require` | Amjad Masad
---
 Examples/2048/GameBoard.js                    | 14 ++++----
 Examples/Movies/SearchScreen.js               |  2 ++
 Examples/UIExplorer/ImageCapInsetsExample.js  |  5 ++-
 Examples/UIExplorer/ImageExample.js           | 21 ++++++-----
 Examples/UIExplorer/TabBarExample.js          |  7 ++--
 .../Touchable/TouchableHighlight.js           |  2 +-
 .../Components/Touchable/TouchableOpacity.js  |  2 +-
 .../Components/View/ViewStylePropTypes.js     |  8 ++---
 Libraries/Image/Image.ios.js                  |  2 +-
 Libraries/Image/ImageStylePropTypes.js        | 28 +++++++--------
 Libraries/Image/ix.js                         | 26 --------------
 Libraries/Text/TextStylePropTypes.js          | 35 +++++++++----------
 Libraries/react-native/react-native.js        |  2 +-
 packager/packager.js                          |  7 +++-
 .../src/Server/__tests__/Server-test.js       | 19 ++++++++--
 packager/react-packager/src/Server/index.js   | 26 +++++++-------
 website/server/extractDocs.js                 |  2 +-
 17 files changed, 97 insertions(+), 111 deletions(-)
 delete mode 100644 Libraries/Image/ix.js

diff --git a/Examples/2048/GameBoard.js b/Examples/2048/GameBoard.js
index 8db899116..39b72141a 100644
--- a/Examples/2048/GameBoard.js
+++ b/Examples/2048/GameBoard.js
@@ -2,11 +2,12 @@
  * Copyright 2004-present Facebook. All Rights Reserved.
  *
  * @providesModule GameBoard
+ * @flow
  */
 'use strict';
 
 // NB: Taken straight from: https://github.com/IvanVergiliev/2048-react/blob/master/src/board.js
-//     with no modificiation except to format it for CommonJS and fix lint errors
+//     with no modificiation except to format it for CommonJS and fix lint/flow errors
 
 var rotateLeft = function (matrix) {
   var rows = matrix.length;
@@ -21,9 +22,10 @@ var rotateLeft = function (matrix) {
   return res;
 };
 
-var Tile = function (value, row, column) {
+var Tile = function (value?: number, row?: number, column?: number) {
   this.value = value || 0;
   this.row = row || -1;
+
   this.column = column || -1;
   this.oldRow = -1;
   this.oldColumn = -1;
@@ -102,8 +104,8 @@ Board.prototype.moveLeft = function () {
         targetTile.value += tile2.value;
       }
       resultRow[target] = targetTile;
-      this.won |= (targetTile.value === 2048);
-      hasChanged |= (targetTile.value !== this.cells[row][target].value);
+      this.won = this.won || (targetTile.value === 2048);
+      hasChanged = hasChanged || (targetTile.value !== this.cells[row][target].value);
     }
     this.cells[row] = resultRow;
   }
@@ -172,14 +174,14 @@ Board.prototype.hasLost = function () {
   var canMove = false;
   for (var row = 0; row < Board.size; ++row) {
     for (var column = 0; column < Board.size; ++column) {
-      canMove |= (this.cells[row][column].value === 0);
+      canMove = canMove || (this.cells[row][column].value === 0);
       for (var dir = 0; dir < 4; ++dir) {
         var newRow = row + Board.deltaX[dir];
         var newColumn = column + Board.deltaY[dir];
         if (newRow < 0 || newRow >= Board.size || newColumn < 0 || newColumn >= Board.size) {
           continue;
         }
-        canMove |= (this.cells[row][column].value === this.cells[newRow][newColumn].value);
+        canMove = canMove || (this.cells[row][column].value === this.cells[newRow][newColumn].value);
       }
     }
   }
diff --git a/Examples/Movies/SearchScreen.js b/Examples/Movies/SearchScreen.js
index 822147516..700be18a1 100644
--- a/Examples/Movies/SearchScreen.js
+++ b/Examples/Movies/SearchScreen.js
@@ -39,6 +39,8 @@ var LOADING = {};
 var SearchScreen = React.createClass({
   mixins: [TimerMixin],
 
+  timeoutID: (null: any),
+
   getInitialState: function() {
     return {
       isLoading: false,
diff --git a/Examples/UIExplorer/ImageCapInsetsExample.js b/Examples/UIExplorer/ImageCapInsetsExample.js
index 20fea43c7..d1efbdf2f 100644
--- a/Examples/UIExplorer/ImageCapInsetsExample.js
+++ b/Examples/UIExplorer/ImageCapInsetsExample.js
@@ -11,7 +11,6 @@ var {
   StyleSheet,
   Text,
   View,
-  ix,
 } = React;
 
 var ImageCapInsetsExample = React.createClass({
@@ -23,7 +22,7 @@ var ImageCapInsetsExample = React.createClass({
             capInsets: none
           </Text>
           <Image
-            source={ix('story-background')}
+            source={require('image!story-background')}
             style={styles.storyBackground}
             capInsets={{left: 0, right: 0, bottom: 0, top: 0}}
           />
@@ -33,7 +32,7 @@ var ImageCapInsetsExample = React.createClass({
             capInsets: 15
           </Text>
           <Image
-            source={ix('story-background')}
+            source={require('image!story-background')}
             style={styles.storyBackground}
             capInsets={{left: 15, right: 15, bottom: 15, top: 15}}
           />
diff --git a/Examples/UIExplorer/ImageExample.js b/Examples/UIExplorer/ImageExample.js
index 12b4d8843..7daf53791 100644
--- a/Examples/UIExplorer/ImageExample.js
+++ b/Examples/UIExplorer/ImageExample.js
@@ -9,7 +9,6 @@ var {
   StyleSheet,
   Text,
   View,
-  ix,
 } = React;
 
 var ImageCapInsetsExample = require('./ImageCapInsetsExample');
@@ -34,15 +33,15 @@ exports.examples = [
   },
   {
     title: 'Plain Static Image',
-    description: 'Static assets must be referenced with the `ix` wrapper and ' +
-      'located in the app bundle.',
+    description: 'Static assets should be required by prefixing with `image!` ' +
+      'and are located in the app bundle.',
     render: function() {
       return (
         <View style={styles.horizontal}>
-          <Image source={ix('uie_thumb_normal')} style={styles.icon} />
-          <Image source={ix('uie_thumb_selected')} style={styles.icon} />
-          <Image source={ix('uie_comment_normal')} style={styles.icon} />
-          <Image source={ix('uie_comment_highlighted')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_normal')} style={styles.icon} />
+          <Image source={require('image!uie_thumb_selected')} style={styles.icon} />
+          <Image source={require('image!uie_comment_normal')} style={styles.icon} />
+          <Image source={require('image!uie_comment_highlighted')} style={styles.icon} />
         </View>
       );
     },
@@ -184,19 +183,19 @@ exports.examples = [
       return (
         <View style={styles.horizontal}>
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, {tintColor: 'blue' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'green' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'red' }]}
           />
           <Image
-            source={ix('uie_thumb_normal')}
+            source={require('image!uie_thumb_normal')}
             style={[styles.icon, styles.leftMargin, {tintColor: 'black' }]}
           />
         </View>
diff --git a/Examples/UIExplorer/TabBarExample.js b/Examples/UIExplorer/TabBarExample.js
index 34518284d..cd116b3e7 100644
--- a/Examples/UIExplorer/TabBarExample.js
+++ b/Examples/UIExplorer/TabBarExample.js
@@ -10,7 +10,6 @@ var StyleSheet = require('StyleSheet');
 var Text = require('Text');
 var View = require('View');
 
-var ix = require('ix');
 
 var TabBarExample = React.createClass({
 
@@ -42,7 +41,7 @@ var TabBarExample = React.createClass({
         selectedTab={this.state.selectedTab}>
         <TabBarItemIOS
           name="blueTab"
-          icon={ix('favorites')}
+          icon={require('image!favorites')}
           accessibilityLabel="Blue Tab"
           selected={this.state.selectedTab === 'blueTab'}
           onPress={() => {
@@ -55,7 +54,7 @@ var TabBarExample = React.createClass({
         <TabBarItemIOS
           accessibilityLabel="Red Tab"
           name="redTab"
-          icon={ix('history')}
+          icon={require('image!history')}
           badgeValue={this.state.notifCount ? String(this.state.notifCount) : null}
           selected={this.state.selectedTab === 'redTab'}
           onPress={() => {
@@ -68,7 +67,7 @@ var TabBarExample = React.createClass({
         </TabBarItemIOS>
         <TabBarItemIOS
           name="greenTab"
-          icon={ix('more')}
+          icon={require('image!more')}
           accessibilityLabel="Green Tab"
           selected={this.state.selectedTab === 'greenTab'}
           onPress={() => {
diff --git a/Libraries/Components/Touchable/TouchableHighlight.js b/Libraries/Components/Touchable/TouchableHighlight.js
index 9bb539ceb..0794e19ae 100644
--- a/Libraries/Components/Touchable/TouchableHighlight.js
+++ b/Libraries/Components/Touchable/TouchableHighlight.js
@@ -41,7 +41,7 @@ var DEFAULT_PROPS = {
  *     <TouchableHighlight onPress={this._onPressButton}>
  *       <Image
  *         style={styles.button}
- *         source={ix('myButton')}
+ *         source={require('image!myButton')}
  *       />
  *     </View>
  *   );
diff --git a/Libraries/Components/Touchable/TouchableOpacity.js b/Libraries/Components/Touchable/TouchableOpacity.js
index 549df36a8..680fc87f5 100644
--- a/Libraries/Components/Touchable/TouchableOpacity.js
+++ b/Libraries/Components/Touchable/TouchableOpacity.js
@@ -30,7 +30,7 @@ var onlyChild = require('onlyChild');
  *     <TouchableOpacity onPress={this._onPressButton}>
  *       <Image
  *         style={styles.button}
- *         source={ix('myButton')}
+ *         source={require('image!myButton')}
  *       />
  *     </View>
  *   );
diff --git a/Libraries/Components/View/ViewStylePropTypes.js b/Libraries/Components/View/ViewStylePropTypes.js
index c049c3d53..3c226bcde 100644
--- a/Libraries/Components/View/ViewStylePropTypes.js
+++ b/Libraries/Components/View/ViewStylePropTypes.js
@@ -8,13 +8,11 @@
 var LayoutPropTypes = require('LayoutPropTypes');
 var ReactPropTypes = require('ReactPropTypes');
 
-var merge = require('merge');
-
 /**
  * Warning: Some of these properties may not be supported in all releases.
  */
-var ViewStylePropTypes = merge(
-  LayoutPropTypes, {
+var ViewStylePropTypes = {
+  ...LayoutPropTypes,
   backgroundColor: ReactPropTypes.string,
   borderColor: ReactPropTypes.string,
   borderTopColor: ReactPropTypes.string,
@@ -36,6 +34,6 @@ var ViewStylePropTypes = merge(
   scaleY: ReactPropTypes.number,
   translateX: ReactPropTypes.number,
   translateY: ReactPropTypes.number,
-});
+};
 
 module.exports = ViewStylePropTypes;
diff --git a/Libraries/Image/Image.ios.js b/Libraries/Image/Image.ios.js
index 315667d25..c25e92654 100644
--- a/Libraries/Image/Image.ios.js
+++ b/Libraries/Image/Image.ios.js
@@ -36,7 +36,7 @@ var warning = require('warning');
  *     <View>
  *       <Image
  *         style={styles.icon}
- *         source={ix('myIcon')}
+ *         source={require('image!myIcon')}
  *       />
  *       <Image
  *         style={styles.logo}
diff --git a/Libraries/Image/ImageStylePropTypes.js b/Libraries/Image/ImageStylePropTypes.js
index 3c67a7795..2973a72d6 100644
--- a/Libraries/Image/ImageStylePropTypes.js
+++ b/Libraries/Image/ImageStylePropTypes.js
@@ -9,23 +9,19 @@ var ImageResizeMode = require('ImageResizeMode');
 var LayoutPropTypes = require('LayoutPropTypes');
 var ReactPropTypes = require('ReactPropTypes');
 
-var merge = require('merge');
+var ImageStylePropTypes = {
+  ...LayoutPropTypes,
+  resizeMode: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)),
+  backgroundColor: ReactPropTypes.string,
+  borderColor: ReactPropTypes.string,
+  borderWidth: ReactPropTypes.number,
+  borderRadius: ReactPropTypes.number,
 
-var ImageStylePropTypes = merge(
-  LayoutPropTypes,
-  {
-    resizeMode: ReactPropTypes.oneOf(Object.keys(ImageResizeMode)),
-    backgroundColor: ReactPropTypes.string,
-    borderColor: ReactPropTypes.string,
-    borderWidth: ReactPropTypes.number,
-    borderRadius: ReactPropTypes.number,
-
-    // iOS-Specific style to "tint" an image.
-    // It changes the color of all the non-transparent pixels to the tintColor
-    tintColor: ReactPropTypes.string,
-    opacity: ReactPropTypes.number,
-  }
-);
+  // iOS-Specific style to "tint" an image.
+  // It changes the color of all the non-transparent pixels to the tintColor
+  tintColor: ReactPropTypes.string,
+  opacity: ReactPropTypes.number,
+};
 
 // Image doesn't support padding correctly (#4841912)
 var unsupportedProps = Object.keys({
diff --git a/Libraries/Image/ix.js b/Libraries/Image/ix.js
deleted file mode 100644
index 52cbbc4e2..000000000
--- a/Libraries/Image/ix.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright 2004-present Facebook. All Rights Reserved.
- *
- * @providesModule ix
- */
-'use strict';
-
-/**
- * This function is used to mark string literals that are image paths. The
- * return value is a blob of data that core image components understand how to
- * render.
- *
- * The arguments to ix() must be string literals so that they can be parsed
- * statically.
- *
- * @param  string        Image path to render
- * @return object        Data blob to be used by core UI components
- */
-function ix(path) {
-  return {
-    uri: path,
-    isStatic: true,
-  };
-}
-
-module.exports = ix;
diff --git a/Libraries/Text/TextStylePropTypes.js b/Libraries/Text/TextStylePropTypes.js
index 0421794d2..acc91f699 100644
--- a/Libraries/Text/TextStylePropTypes.js
+++ b/Libraries/Text/TextStylePropTypes.js
@@ -8,25 +8,22 @@
 var ReactPropTypes = require('ReactPropTypes');
 var ViewStylePropTypes = require('ViewStylePropTypes');
 
-var merge = require('merge');
-
-var TextStylePropTypes = merge(
-  ViewStylePropTypes, {
-    fontFamily: ReactPropTypes.string,
-    fontSize: ReactPropTypes.number,
-    fontWeight: ReactPropTypes.oneOf(['normal' /*default*/, 'bold']),
-    fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
-    lineHeight: ReactPropTypes.number,
-    color: ReactPropTypes.string,
-    containerBackgroundColor: ReactPropTypes.string,
-    textAlign: ReactPropTypes.oneOf(
-      ['auto' /*default*/, 'left', 'right', 'center']
-    ),
-    writingDirection: ReactPropTypes.oneOf(
-      ['auto' /*default*/, 'ltr', 'rtl']
-    ),
-  }
-);
+var TextStylePropTypes = {
+  ...ViewStylePropTypes,
+  fontFamily: ReactPropTypes.string,
+  fontSize: ReactPropTypes.number,
+  fontWeight: ReactPropTypes.oneOf(['normal' /*default*/, 'bold']),
+  fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
+  lineHeight: ReactPropTypes.number,
+  color: ReactPropTypes.string,
+  containerBackgroundColor: ReactPropTypes.string,
+  textAlign: ReactPropTypes.oneOf(
+    ['auto' /*default*/, 'left', 'right', 'center']
+  ),
+  writingDirection: ReactPropTypes.oneOf(
+    ['auto' /*default*/, 'ltr', 'rtl']
+  ),
+};
 
 // Text doesn't support padding correctly (#4841912)
 var unsupportedProps = Object.keys({
diff --git a/Libraries/react-native/react-native.js b/Libraries/react-native/react-native.js
index 59c82ef72..8c53abd53 100644
--- a/Libraries/react-native/react-native.js
+++ b/Libraries/react-native/react-native.js
@@ -45,7 +45,7 @@ var ReactNative = {
   TimerMixin: require('TimerMixin'),
   VibrationIOS: require('VibrationIOS'),
 
-  ix: require('ix'),
+  invariant: require('invariant'),
 };
 
 module.exports = ReactNative;
diff --git a/packager/packager.js b/packager/packager.js
index 26917237d..ce4dbd25f 100644
--- a/packager/packager.js
+++ b/packager/packager.js
@@ -38,7 +38,12 @@ if (options.projectRoots) {
     options.projectRoots = options.projectRoots.split(',');
   }
 } else {
-  options.projectRoots = [path.resolve(__dirname, '..')];
+  if (__dirname.match(/node_modules\/react-native\/packager$/)) {
+    // packager is running from node_modules of another project
+    options.projectRoots = [path.resolve(__dirname, '../../..')];
+  } else {
+    options.projectRoots = [path.resolve(__dirname, '..')];
+  }
 }
 
 if (options.root) {
diff --git a/packager/react-packager/src/Server/__tests__/Server-test.js b/packager/react-packager/src/Server/__tests__/Server-test.js
index 71b7e400f..f49058061 100644
--- a/packager/react-packager/src/Server/__tests__/Server-test.js
+++ b/packager/react-packager/src/Server/__tests__/Server-test.js
@@ -51,7 +51,7 @@ describe('processRequest', function() {
     Packager = require('../../Packager');
     FileWatcher = require('../../FileWatcher');
 
-    Packager.prototype.package = function() {
+    Packager.prototype.package = jest.genMockFunction().mockImpl(function() {
       return q({
         getSource: function() {
           return 'this is the source';
@@ -60,7 +60,7 @@ describe('processRequest', function() {
           return 'this is the source map';
         },
       });
-    };
+    });
 
 
     FileWatcher.prototype.on = function(eventType, callback) {
@@ -106,6 +106,21 @@ describe('processRequest', function() {
     });
   });
 
+  pit('works with .ios.js extension', function() {
+    return makeRequest(
+      requestHandler,
+      'index.ios.includeRequire.bundle'
+    ).then(function(response) {
+      expect(response).toEqual('this is the source');
+      expect(Packager.prototype.package).toBeCalledWith(
+        'index.ios.js',
+        true,
+        'index.ios.includeRequire.map',
+        true
+      );
+    });
+  });
+
   pit('watches all files in projectRoot', function() {
     return makeRequest(
       requestHandler,
diff --git a/packager/react-packager/src/Server/index.js b/packager/react-packager/src/Server/index.js
index 09a3c6400..3043903dd 100644
--- a/packager/react-packager/src/Server/index.js
+++ b/packager/react-packager/src/Server/index.js
@@ -6,7 +6,6 @@ var declareOpts = require('../lib/declareOpts');
 var FileWatcher = require('../FileWatcher');
 var Packager = require('../Packager');
 var Activity = require('../Activity');
-var setImmediate = require('timers').setImmediate;
 var q = require('q');
 var _ = require('underscore');
 
@@ -236,23 +235,24 @@ Server.prototype.processRequest = function(req, res, next) {
 function getOptionsFromUrl(reqUrl) {
   // `true` to parse the query param as an object.
   var urlObj = url.parse(reqUrl, true);
+  var pathname = urlObj.pathname;
 
-  var match = urlObj.pathname.match(/^\/?([^\.]+)\..*(bundle|map)$/);
-  if (!(match && match[1])) {
-    throw new Error('Invalid url format, expected "/path/to/file.bundle"');
-  }
-  var main = match[1] + '.js';
+  // Backwards compatibility. Options used to be as added as '.' to the
+  // entry module name. We can safely remove these options.
+  var entryFile = pathname.replace(/^\//, '').split('.').filter(function(part) {
+    if (part === 'includeRequire' || part === 'runModule' ||
+        part === 'bundle' || part === 'map') {
+      return false;
+    }
+    return true;
+  }).join('.') + '.js';
 
   return {
-    sourceMapUrl: urlObj.pathname.replace(/\.bundle$/, '.map'),
-    main: main,
+    sourceMapUrl: pathname.replace(/\.bundle$/, '.map'),
+    main: entryFile,
     dev: getBoolOptionFromQuery(urlObj.query, 'dev', true),
     minify: getBoolOptionFromQuery(urlObj.query, 'minify'),
-    runModule: getBoolOptionFromQuery(urlObj.query, 'runModule') ||
-      // Backwards compatibility.
-      urlObj.pathname.split('.').some(function(part) {
-        return part === 'runModule';
-      }),
+    runModule: getBoolOptionFromQuery(urlObj.query, 'runModule', true),
   };
 }
 
diff --git a/website/server/extractDocs.js b/website/server/extractDocs.js
index b8aa3e6cf..b6c4114f1 100644
--- a/website/server/extractDocs.js
+++ b/website/server/extractDocs.js
@@ -39,7 +39,7 @@ var components = [
   '../Libraries/Components/ActivityIndicatorIOS/ActivityIndicatorIOS.ios.js',
   '../Libraries/Components/DatePicker/DatePickerIOS.ios.js',
   '../Libraries/Image/Image.ios.js',
-  '../Libraries/Components/ListView/ListView.js',
+  '../Libraries/CustomComponents/ListView/ListView.js',
   '../Libraries/Components/MapView/MapView.js',
   '../Libraries/Components/Navigation/NavigatorIOS.ios.js',
   '../Libraries/Picker/PickerIOS.ios.js',