Merge pull request facebookarchive#90 from zertosh/master

Update "flux-chat", "flux-todomvc" and "TodoList.md" to React 0.12.0

docs/TodoList.md

@@ -56,13 +56,13 @@ Now we are ready to create a dispatcher. Here is an naive example of a Dispatche
 
 ```javascript
 var Promise = require('es6-promise').Promise;
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var _callbacks = [];
 var _promises = [];
 
 var Dispatcher = function() {};
-Dispatcher.prototype = merge(Dispatcher.prototype, {
+Dispatcher.prototype = assign({}, Dispatcher.prototype, {
 
  /**
  * Register a Store's callback so that it may be invoked by an action.
@@ -112,9 +112,9 @@ Now we are all set to create a dispatcher that is more specific to our app, whic
 ```javascript
 var Dispatcher = require('./Dispatcher');
 
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
-var AppDispatcher = merge(Dispatcher.prototype, {
+var AppDispatcher = assign({}, Dispatcher.prototype, {
 
  /**
  * A bridge function between the views and the dispatcher, marking the action
@@ -145,7 +145,7 @@ We can use Node's EventEmitter to get started with a store. We need EventEmitter
 var AppDispatcher = require('../dispatcher/AppDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var TodoConstants = require('../constants/TodoConstants');
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var CHANGE_EVENT = 'change';
 
@@ -173,7 +173,7 @@ function destroy(id) {
  delete _todos[id];
 }
 
-var TodoStore = merge(EventEmitter.prototype, {
+var TodoStore = assign({}, EventEmitter.prototype, {
 
  /**
  * Get the entire collection of TODOs.
@@ -241,8 +241,6 @@ Listening to Changes with a Controller-View
 We need a React component near the top of our component hierarchy to listen for changes in the store. In a larger app, we would have more of these listening components, perhaps one for every section of the page. In Facebook's Ads Creation Tool, we have many of these controller-like views, each governing a specific section of the UI. In the Lookback Video Editor, we only had two: one for the animated preview and one for the image selection interface. Here's one for our TodoMVC example. Again, this is slightly abbreviated, but for the full code you can take a look at the TodoMVC example's [TodoApp.react.js](https://github.com/facebook/flux/blob/master/examples/flux-todomvc/js/components/TodoApp.react.js)
 
 ```javascript
-/** @jsx React.DOM */
-
 var Footer = require('./Footer.react');
 var Header = require('./Header.react');
 var MainSection = require('./MainSection.react');
@@ -333,8 +331,6 @@ return (
 Now each TodoItem can display it's own text, and perform actions utilizing it's own ID. Explaining all the different actions that a TodoItem can invoke in the TodoMVC example goes beyond the scope of this article, but let's just take a look at the action that deletes one of the to-do items. Here is an abbreviated version of the TodoItem:
 
 ```javascript
-/** @jsx React.DOM */
-
 var React = require('react');
 var TodoActions = require('../actions/TodoActions');
 var TodoTextInput = require('./TodoTextInput.react');
@@ -377,8 +373,6 @@ As you'll see below, with every change to the input, React expects us to update
 Because TodoTextInput is being used in multiple places within our application, with different behaviors, we'll need to pass the onSave method in as a prop from the component's parent. This allows onSave to invoke different actions depending on where it is used.
 
 ```javascript
-/** @jsx React.DOM */
-
 var React = require('react');
 var ReactPropTypes = React.PropTypes;
 
@@ -457,8 +451,6 @@ The Header passes in the onSave method as a prop to allow the TodoTextInput to c
 to-do items:
 
 ```javascript
-/** @jsx React.DOM */
-
 var React = require('react');
 var TodoActions = require('../actions/TodoActions');
 var TodoTextInput = require('./TodoTextInput.react');
@@ -561,13 +553,11 @@ Start Me Up
 The bootstrap file of our application is app.js. It simply takes the TodoApp component and renders it in the root element of the application.
 
 ```javascript
-/** @jsx React.DOM */
-
 var React = require('react');
 
 var TodoApp = require('./components/TodoApp.react');
 
-React.renderComponent(
+React.render(
  <TodoApp />,
  document.getElementById('todoapp')
 );

examples/flux-chat/js/app.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 // This file bootstraps the entire application.
@@ -24,7 +22,7 @@ ChatExampleData.init(); // load example data into localstorage
 
 ChatWebAPIUtils.getAllMessages();
 
-React.renderComponent(
+React.render(
  <ChatApp />,
  document.getElementById('react')
 );

examples/flux-chat/js/components/ChatApp.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var MessageSection = require('./MessageSection.react');

examples/flux-chat/js/components/MessageComposer.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var ChatMessageActionCreators = require('../actions/ChatMessageActionCreators');

examples/flux-chat/js/components/MessageListItem.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-chat/js/components/MessageSection.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var MessageComposer = require('./MessageComposer.react');

examples/flux-chat/js/components/ThreadListItem.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var ChatThreadActionCreators = require('../actions/ChatThreadActionCreators');

examples/flux-chat/js/components/ThreadSection.react.js

@@ -8,8 +8,6 @@
  * FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
  * AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
  * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-chat/js/dispatcher/ChatAppDispatcher.js

@@ -12,11 +12,11 @@
 
 var ChatConstants = require('../constants/ChatConstants');
 var Dispatcher = require('flux').Dispatcher;
-var copyProperties = require('react/lib/copyProperties');
+var assign = require('react/lib/Object.assign');
 
 var PayloadSources = ChatConstants.PayloadSources;
 
-var ChatAppDispatcher = copyProperties(new Dispatcher(), {
+var ChatAppDispatcher = assign(new Dispatcher(), {
 
  /**
  * @param {object} action The details of the action, including the action's

examples/flux-chat/js/stores/MessageStore.js

@@ -15,7 +15,7 @@ var ChatConstants = require('../constants/ChatConstants');
 var ChatMessageUtils = require('../utils/ChatMessageUtils');
 var EventEmitter = require('events').EventEmitter;
 var ThreadStore = require('../stores/ThreadStore');
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var ActionTypes = ChatConstants.ActionTypes;
 var CHANGE_EVENT = 'change';
@@ -41,7 +41,7 @@ function _markAllInThreadRead(threadID) {
  }
 }
 
-var MessageStore = merge(EventEmitter.prototype, {
+var MessageStore = assign({}, EventEmitter.prototype, {
 
  emitChange: function() {
  this.emit(CHANGE_EVENT);

examples/flux-chat/js/stores/ThreadStore.js

@@ -14,15 +14,15 @@ var ChatAppDispatcher = require('../dispatcher/ChatAppDispatcher');
 var ChatConstants = require('../constants/ChatConstants');
 var ChatMessageUtils = require('../utils/ChatMessageUtils');
 var EventEmitter = require('events').EventEmitter;
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var ActionTypes = ChatConstants.ActionTypes;
 var CHANGE_EVENT = 'change';
 
 var _currentID = null;
 var _threads = {};
 
-var ThreadStore = merge(EventEmitter.prototype, {
+var ThreadStore = assign({}, EventEmitter.prototype, {
 
  init: function(rawMessages) {
  rawMessages.forEach(function(message) {

examples/flux-chat/js/stores/UnreadThreadStore.js

@@ -15,12 +15,12 @@ var ChatConstants = require('../constants/ChatConstants');
 var EventEmitter = require('events').EventEmitter;
 var MessageStore = require('../stores/MessageStore');
 var ThreadStore = require('../stores/ThreadStore');
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var ActionTypes = ChatConstants.ActionTypes;
 var CHANGE_EVENT = 'change';
 
-var UnreadThreadStore = merge(EventEmitter.prototype, {
+var UnreadThreadStore = assign({}, EventEmitter.prototype, {
 
  emitChange: function() {
  this.emit(CHANGE_EVENT);

examples/flux-chat/js/stores/__tests__/UnreadThreadStore-test.js

@@ -11,7 +11,7 @@
  */
 
 jest.dontMock('../UnreadThreadStore');
-jest.dontMock('react/lib/merge');
+jest.dontMock('react/lib/Object.assign');
 
 describe('UnreadThreadStore', function() {
 

examples/flux-chat/package.json

@@ -6,15 +6,15 @@
  "main": "js/app.js",
  "dependencies": {
  "flux": "^2.0.0",
- "react": "~0.11"
+ "react": "^0.12.0"
  },
  "devDependencies": {
- "browserify": "~4.2.2",
- "envify": "~2.0.1",
+ "browserify": "^6.2.0",
+ "envify": "^3.0.0",
  "jest-cli": "~0.1.17",
- "reactify": "~0.14.0",
+ "reactify": "~0.15.2",
  "uglify-js": "~2.4.15",
- "watchify": "~0.10.2"
+ "watchify": "^2.1.1"
  },
  "scripts": {
  "start": "watchify -o js/bundle.js -v -d .",

examples/flux-todomvc/js/app.js

@@ -5,15 +5,13 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');
 
 var TodoApp = require('./components/TodoApp.react');
 
-React.renderComponent(
+React.render(
  <TodoApp />,
  document.getElementById('todoapp')
 );

examples/flux-todomvc/js/components/Footer.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-todomvc/js/components/Header.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-todomvc/js/components/MainSection.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-todomvc/js/components/TodoApp.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 /**

examples/flux-todomvc/js/components/TodoItem.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-todomvc/js/components/TodoTextInput.react.js

@@ -5,8 +5,6 @@
  * This source code is licensed under the BSD-style license found in the
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
- *
- * @jsx React.DOM
  */
 
 var React = require('react');

examples/flux-todomvc/js/dispatcher/AppDispatcher.js

@@ -12,8 +12,8 @@
  */
 
 var Dispatcher = require('flux').Dispatcher;
-var copyProperties = require('react/lib/copyProperties');
-var AppDispatcher = copyProperties(new Dispatcher(), {
+var assign = require('react/lib/Object.assign');
+var AppDispatcher = assign(new Dispatcher(), {
 
  /**
  * A bridge function between the views and the dispatcher, marking the action

examples/flux-todomvc/js/stores/TodoStore.js

@@ -12,7 +12,7 @@
 var AppDispatcher = require('../dispatcher/AppDispatcher');
 var EventEmitter = require('events').EventEmitter;
 var TodoConstants = require('../constants/TodoConstants');
-var merge = require('react/lib/merge');
+var assign = require('react/lib/Object.assign');
 
 var CHANGE_EVENT = 'change';
 
@@ -41,7 +41,7 @@ function create(text) {
  * updated.
  */
 function update(id, updates) {
- _todos[id] = merge(_todos[id], updates);
+ _todos[id] = assign({}, _todos[id], updates);
 }
 
 /**
@@ -76,7 +76,7 @@ function destroyCompleted() {
  }
 }
 
-var TodoStore = merge(EventEmitter.prototype, {
+var TodoStore = assign({}, EventEmitter.prototype, {
 
  /**
  * Tests whether all the remaining TODO items are marked as completed.

examples/flux-todomvc/js/stores/__tests__/TodoStore-test.js

@@ -11,7 +11,7 @@
 
 jest.dontMock('../../constants/TodoConstants');
 jest.dontMock('../TodoStore');
-jest.dontMock('react/lib/merge');
+jest.dontMock('react/lib/Object.assign');
 
 describe('TodoStore', function() {