v0.11.1

Closes #1926

(cherry picked from commit eb8f766005)

CHANGELOG.md

@@ -1,3 +1,54 @@
+## 0.11.0 (July 17, 2014)
+
+### React Core
+
+#### Breaking Changes
+* `getDefaultProps()` is now called once per class and shared across all instances
+
+#### New Features
+* Rendering to `null`
+* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
+* New normalized `onBeforeInput` event
+* `React.Children.count` has been added as a helper for counting the number of children
+
+#### Bug Fixes
+
+* Re-renders are batched in more cases
+* Events: `e.view` properly normalized
+* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
+* Improved SVG support
+  * Changing `className` on a mounted SVG component now works correctly
+  * Added support for elements `mask` and `tspan`
+  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
+* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
+* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
+* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
+* Added explicit warning when missing polyfills
+
+### React With Addons
+* PureRenderMixin: a mixin which helps optimize "pure" components
+* Perf: a new set of tools to help with performance analysis
+* Update: New `$apply` command to transform values
+* TransitionGroup bug fixes with null elements, Android
+
+### React NPM Module
+* Now includes the pre-built packages under `dist/`.
+* `envify` is properly listed as a dependency instead of a peer dependency
+
+### JSX
+* Added support for namespaces, eg `<Components.Checkbox />`
+* JSXTransformer
+  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
+  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
+  * Fixed a bug preventing sourcemaps from working in Firefox
+
+### React Tools Module
+* Improved readme with usage and API information
+* Improved ES6 transforms available with `--harmony` option
+* Added `--source-map-inline` option to the `jsx` executable
+* New `transformWithDetails` API which gives access to the raw sourcemap data
+
+
 ## 0.10.0 (March 21, 2014)
 
 ### React Core

README.md

@@ -36,12 +36,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
 
 ```html
 <!-- The core React library -->
-<script src="http://fb.me/react-0.10.0.js"></script>
+<script src="http://fb.me/react-0.11.0.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.10.0.js"></script>
+<script src="http://fb.me/JSXTransformer-0.11.0.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.10.0.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
+We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.11.0.zip) which might be useful if this is your first time using React. It includes a webpage with an example of using React with live code.
 
 If you'd like to use [bower](http://bower.io), it's as easy as:
 

docs/_config.yml

@@ -13,7 +13,7 @@ redcarpet:
 pygments: true
 name: React
 markdown: redcarpet
-react_version: 0.10.0
+react_version: 0.11.0
 description: A JavaScript library for building user interfaces
 relative_permalinks: true
 paginate: 5

docs/_css/_typography.scss

@@ -6,7 +6,6 @@ $textColorLight: lighten($textColor, 20%);
 html {
   font-family: $helvetica;
   font-family: proxima-nova, $helvetica;
-  font-weight: 300;
   color: $textColor;
   line-height: 1.28;
 }
@@ -132,5 +131,3 @@ a {
 .center {
   text-align: center;
 }
-
-

docs/_posts/2014-07-13-react-v0.11-rc1.md

@@ -22,8 +22,6 @@ We've also published version `0.11.0-rc1` of the `react` and `react-tools` packa
 Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
 
 
-# Blog Post
-
 ## `getDefaultProps`
 
 Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
@@ -31,7 +29,7 @@ Starting in React 0.11, `getDefaultProps()` is called only once when `React.crea
 
 ## Rendering to `null`
 
-Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to writing meaningful code. Returning `null` in an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
+Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
 
 ```js
 // Before

docs/_posts/2014-07-17-react-v0.11.md

@@ -0,0 +1,149 @@
+---
+title: React v0.11
+layout: post
+author: Paul O’Shannessy
+---
+
+We're really happy to announce the availability of React v0.11. There seems to be a lot of excitement already and we appreciate everybody who gave the release candidate a try over the weekend. We made a couple small changes in response to the feedback and issues filed. We enabled the destructuring assignment transform when using `jsx --harmony`, fixed a small regression with `statics`, and made sure we actually exposed the new API we said we were shipping: `React.Children.count`.
+
+
+This version has been cooking for a couple months now and includes a wide array of bug fixes and features. We highlighted some of the most important changes below, along with the full changelog.
+
+The release is available for download from the CDN:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.11.0.js>  
+  Minified build for production: <http://fb.me/react-0.11.0.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.11.0.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.11.0.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.11.0.js>
+
+We've also published version `0.11.0` of the `react` and `react-tools` packages on npm and the `react` package on bower.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+
+## `getDefaultProps`
+
+Starting in React 0.11, `getDefaultProps()` is called only once when `React.createClass()` is called, instead of each time a component is rendered. This means that `getDefaultProps()` can no longer vary its return value based on `this.props` and any objects will be shared across all instances. This change improves performance and will make it possible in the future to do PropTypes checks earlier in the rendering process, allowing us to give better error messages.
+
+
+## Rendering to `null`
+
+Since React's release, people have been using work arounds to "render nothing". Usually this means returning an empty `<div/>` or `<span/>`. Some people even got clever and started returning `<noscript/>` to avoid extraneous DOM nodes. We finally provided a "blessed" solution that allows developers to write meaningful code. Returning `null` is an explicit indication to React that you do not want anything rendered. Behind the scenes we make this work with a `<noscript>` element, though in the future we hope to not put anything in the document. In the mean time, `<noscript>` elements do not affect layout in any way, so you can feel safe using `null` today!
+
+```js
+// Before
+render: function() {
+  if (!this.state.visible) {
+    return <span/>;
+  }
+  // ...
+}
+
+// After
+render: function() {
+  if (!this.state.visible) {
+    return null;
+  }
+  // ...
+}
+```
+
+
+## JSX Namespacing
+
+Another feature request we've been hearing for a long time is the ability to have namespaces in JSX. Given that JSX is just JavaScript, we didn't want to use XML namespacing. Instead we opted for a standard JS approach: object property access. Instead of assigning variables to access components stored in an object (such as a component library), you can now use the component directly as `<Namespace.Component/>`.
+
+```js
+// Before
+var UI = require('UI');
+var UILayout = UI.Layout;
+var UIButton = UI.Button;
+var UILabel = UI.Label;
+
+render: function() {
+  return <UILayout><UIButton /><UILabel>text</UILabel></UILayout>;
+}
+
+// After
+var UI = require('UI');
+
+render: function() {
+  return <UI.Layout><UI.Button /><UI.Label>text</UI.Label></UI.Layout>;
+}
+```
+
+
+## Improved keyboard event normalization
+
+Keyboard events now contain a normalized `e.key` value according to the [DOM Level 3 Events spec](http://www.w3.org/TR/DOM-Level-3-Events/#keys-special), allowing you to write simpler key handling code that works in all browsers, such as:
+
+```js
+handleKeyDown: function(e) {
+  if (e.key === 'Enter') {
+    // Handle enter key
+  } else if (e.key === ' ') {
+    // Handle spacebar
+  } else if (e.key === 'ArrowLeft') {
+    // Handle left arrow
+  }
+},
+```
+
+Keyboard and mouse events also now include a normalized `e.getModifierState()` that works consistently across browsers.
+
+## Changelog
+
+### React Core
+
+#### Breaking Changes
+* `getDefaultProps()` is now called once per class and shared across all instances
+
+#### New Features
+* Rendering to `null`
+* Keyboard events include normalized `e.key` and `e.getModifierState()` properties
+* New normalized `onBeforeInput` event
+* `React.Children.count` has been added as a helper for counting the number of children
+
+#### Bug Fixes
+
+* Re-renders are batched in more cases
+* Events: `e.view` properly normalized
+* Added Support for more HTML attributes (`coords`, `crossOrigin`, `download`, `hrefLang`, `mediaGroup`, `muted`, `scrolling`, `shape`, `srcSet`, `start`, `useMap`)
+* Improved SVG support
+  * Changing `className` on a mounted SVG component now works correctly
+  * Added support for elements `mask` and `tspan`
+  * Added support for attributes `dx`, `dy`, `fillOpacity`, `fontFamily`, `fontSize`, `markerEnd`, `markerMid`, `markerStart`, `opacity`, `patternContentUnits`, `patternUnits`, `preserveAspectRatio`, `strokeDasharray`, `strokeOpacity`
+* CSS property names with vendor prefixes (`Webkit`, `ms`, `Moz`, `O`) are now handled properly
+* Duplicate keys no longer cause a hard error; now a warning is logged (and only one of the children with the same key is shown)
+* `img` event listeners are now unbound properly, preventing the error "Two valid but unequal nodes with the same `data-reactid`"
+* Added explicit warning when missing polyfills
+
+### React With Addons
+* PureRenderMixin: a mixin which helps optimize "pure" components
+* Perf: a new set of tools to help with performance analysis
+* Update: New `$apply` command to transform values
+* TransitionGroup bug fixes with null elements, Android
+
+### React NPM Module
+* Now includes the pre-built packages under `dist/`.
+* `envify` is properly listed as a dependency instead of a peer dependency
+
+### JSX
+* Added support for namespaces, eg `<Components.Checkbox />`
+* JSXTransformer
+  * Enable the same `harmony` features available in the command line with `<script type="text/jsx;harmony=true">`
+  * Scripts are downloaded in parallel for more speed. They are still executed in order (as you would expect with normal script tags)
+  * Fixed a bug preventing sourcemaps from working in Firefox
+
+### React Tools Module
+* Improved readme with usage and API information
+* Improved ES6 transforms available with `--harmony` option
+* Added `--source-map-inline` option to the `jsx` executable
+* New `transformWithDetails` API which gives access to the raw sourcemap data
+
+
+

docs/docs/09-addons.md

@@ -9,11 +9,16 @@ next: animation.html
 
 `React.addons` is where we park some useful utilities for building React apps. **These should be considered experimental** but will eventually be rolled into core or a blessed utilities library:
 
-- [`ReactTransitions`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
-- [`ReactLink`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and and the component's state.
-- [`classSet()`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
-- [`ReactTestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
-- [`cloneWithProps()`](clone-with-props.html), to make shallow copies of React components and change their props.
-- [`update()`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
+- [`TransitionGroup` and `CSSTransitionGroup`](animation.html), for dealing with animations and transitions that are usually not simple to implement, such as before a component's removal.
+- [`LinkedStateMixin`](two-way-binding-helpers.html), to simplify the coordination between user's form input data and the component's state.
+- [`classSet`](class-name-manipulation.html), for manipulating the DOM `class` string a bit more cleanly.
+- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
+- [`cloneWithProps`](clone-with-props.html), to make shallow copies of React components and change their props.
+- [`update`](update.html), a helper function that makes dealing with immutable data in JavaScript easier.
+
+The add-ons below are in the development (unminified) version of React only:
+
+- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
+- [`Perf`](perf.html), for measuring performance and giving you hint where to optimize.
 
 To get the add-ons, use `react-with-addons.js` (and its minified counterpart) rather than the common `react.js`.

docs/docs/09.8-perf.md

@@ -16,6 +16,8 @@ In addition to giving you an overview of your app's overall performance, ReactPe
 
 ## General API
 
+The `Perf` object documented here is exposed as `React.addons.Perf` when using the `react-with-addons.js` build in development mode.
+
 ### `Perf.start()` and `Perf.stop()`
 Start/stop the measurement. The React operations in-between are recorded for analyses below. Operations that took an insignificant amount of time are ignored.
 

docs/docs/flux-todo-list.md

@@ -59,21 +59,6 @@ var merge = require('react/lib/merge');
 var _callbacks = [];
 var _promises = [];
 
-/**
- * Add a promise to the queue of callback invocation promises.
- * @param {function} callback The Store's registered callback.
- * @param {object} payload The data from the Action.
- */
-var _addPromise = function(callback, payload) {
-  _promises.push(new Promise(function(resolve, reject) {
-    if (callback(payload)) {
-      resolve(payload);
-    } else {
-      reject(new Error('Dispatcher callback unsuccessful'));
-    }
-  }));
-};
-
 var Dispatcher = function() {};
 Dispatcher.prototype = merge(Dispatcher.prototype, {
 

docs/docs/ref-08-reconciliation.md

@@ -85,7 +85,7 @@ The previous component is now operational. Its `render()` method is called and t
 
 ### Problematic Case
 
-In order to do children reconciliation, React adopts a very naive approach. It goes over the list of children both at the same time and whenever there's a difference generates a mutation.
+In order to do children reconciliation, React adopts a very naive approach. It goes over both lists of children at the same time and generates a mutation whenever there's a difference.
 
 For example if you add an element at the end:
 

docs/docs/videos.md

@@ -26,6 +26,13 @@ A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking i
 
 "In this talk I’ll be discussing why we built a virtual DOM, how it compares to other systems, and its relevance to the future of browser technologies." -- [Pete Hunt](http://www.petehunt.net/)
 
+
+### Going big with React ###
+
+"On paper, all those JS frameworks look promising: clean implementations, quick code design, flawless execution. But what happens when you stress test Javascript? What happens when you throw 6 megabytes of code at it? In this talk, we'll investigate how React performs in a high stress situation, and how it has helped our team build safe code on a massive scale."
+<figure>[![](https://i.vimeocdn.com/video/481670116_650.jpg)](https://skillsmatter.com/skillscasts/5429-going-big-with-react#video)</figure>
+
+
 ### CodeWinds
 
 [Pete Hunt](http://www.petehunt.net/) talked with [Jeff Barczewski](http://jeff.barczewski.com/) about React in CodeWinds Episode 4.

npm-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react",
   "description": "React is a JavaScript library for building user interfaces.",
-  "version": "0.11.0-rc1",
+  "version": "0.11.1",
   "keywords": [
     "react"
   ],

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-tools",
   "description": "A set of complementary tools to React, including the JSX transformer.",
-  "version": "0.11.0-rc1",
+  "version": "0.11.1",
   "keywords": [
     "react",
     "jsx",

src/browser/server/__tests__/ReactServerRendering-test.js

@@ -31,12 +31,13 @@ require('mock-modules')
 
 var mocks = require('mocks');
 
+var ExecutionEnvironment;
 var React;
+var ReactMarkupChecksum;
 var ReactMount;
+var ReactReconcileTransaction;
 var ReactTestUtils;
 var ReactServerRendering;
-var ReactMarkupChecksum;
-var ExecutionEnvironment;
 
 var ID_ATTRIBUTE_NAME;
 
@@ -44,12 +45,14 @@ describe('ReactServerRendering', function() {
   beforeEach(function() {
     require('mock-modules').dumpCache();
     React = require('React');
+    ReactMarkupChecksum = require('ReactMarkupChecksum');
     ReactMount = require('ReactMount');
     ReactTestUtils = require('ReactTestUtils');
+    ReactReconcileTransaction = require('ReactReconcileTransaction');
+
     ExecutionEnvironment = require('ExecutionEnvironment');
     ExecutionEnvironment.canUseDOM = false;
     ReactServerRendering = require('ReactServerRendering');
-    ReactMarkupChecksum = require('ReactMarkupChecksum');
 
     var DOMProperty = require('DOMProperty');
     ID_ATTRIBUTE_NAME = DOMProperty.ID_ATTRIBUTE_NAME;
@@ -373,5 +376,25 @@ describe('ReactServerRendering', function() {
         'a valid ReactComponent.'
       );
     });
+
+    it('allows setState in componentWillMount without using DOM', function() {
+      var Component = React.createClass({
+        componentWillMount: function() {
+          this.setState({text: 'hello, world'});
+        },
+        render: function() {
+          return <div>{this.state.text}</div>;
+        }
+      });
+
+      ReactReconcileTransaction.prototype.perform = function() {
+        // We shouldn't ever be calling this on the server
+        throw new Error('Browser reconcile transaction should not be used');
+      };
+      var markup = ReactServerRendering.renderComponentToString(
+        <Component />
+      );
+      expect(markup.indexOf('hello, world') >= 0).toBe(true);
+    });
   });
 });

src/browser/syntheticEvents/SyntheticMouseEvent.js

@@ -37,7 +37,7 @@ var MouseEventInterface = {
   shiftKey: null,
   altKey: null,
   metaKey: null,
-  getEventModifierState: getEventModifierState,
+  getModifierState: getEventModifierState,
   button: function(event) {
     // Webkit, Firefox, IE9+
     // which:  1 2 3

src/browser/ui/React.js

@@ -126,6 +126,6 @@ if (__DEV__) {
 
 // Version exists only in the open-source version of React, not in Facebook's
 // internal version.
-React.version = '0.11.0-rc1';
+React.version = '0.11.1';
 
 module.exports = React;

src/browser/ui/__tests__/ReactMount-test.js

@@ -106,4 +106,12 @@ describe('ReactMount', function() {
     expect(mockMount.mock.calls.length).toBe(2);
     expect(mockUnmount.mock.calls.length).toBe(1);
   });
+
+  it('should reuse markup if rendering to the same target twice', function() {
+    var container = document.createElement('container');
+    var instance1 = React.renderComponent(<div />, container);
+    var instance2 = React.renderComponent(<div />, container);
+
+    expect(instance1 === instance2).toBe(true);
+  });
 });

src/browser/ui/dom/getEventModifierState.js

@@ -25,10 +25,10 @@
  */
 
 var modifierKeyToProp = {
-  'alt': 'altKey',
-  'control': 'ctrlKey',
-  'meta': 'metaKey',
-  'shift': 'shiftKey'
+  'Alt': 'altKey',
+  'Control': 'ctrlKey',
+  'Meta': 'metaKey',
+  'Shift': 'shiftKey'
 };
 
 // IE8 does not implement getModifierState so we simply map it to the only
@@ -41,8 +41,8 @@ function modifierStateGetter(keyArg) {
   if (nativeEvent.getModifierState) {
     return nativeEvent.getModifierState(keyArg);
   }
-  var keyProp = modifierKeyToProp[keyArg.toLowerCase()];
-  return keyProp && nativeEvent[keyProp];
+  var keyProp = modifierKeyToProp[keyArg];
+  return keyProp ? !!nativeEvent[keyProp] : false;
 }
 
 function getEventModifierState(nativeEvent) {

src/browser/ui/dom/setInnerHTML.js

@@ -66,7 +66,15 @@ if (ExecutionEnvironment.canUseDOM) {
         // Recover leading whitespace by temporarily prepending any character.
         // \uFEFF has the potential advantage of being zero-width/invisible.
         node.innerHTML = '\uFEFF' + html;
-        node.firstChild.deleteData(0, 1);
+
+        // deleteData leaves an empty `TextNode` which offsets the index of all
+        // children. Definitely want to avoid this.
+        var textNode = node.firstChild;
+        if (textNode.data.length === 1) {
+          node.removeChild(textNode);
+        } else {
+          textNode.deleteData(0, 1);
+        }
       } else {
         node.innerHTML = html;
       }

src/core/ReactCompositeComponent.js

@@ -863,7 +863,15 @@ var ReactCompositeComponentMixin = {
   replaceState: function(completeState, callback) {
     validateLifeCycleOnReplaceState(this);
     this._pendingState = completeState;
-    ReactUpdates.enqueueUpdate(this, callback);
+    if (this._compositeLifeCycleState !== CompositeLifeCycle.MOUNTING) {
+      // If we're in a componentWillMount handler, don't enqueue a rerender
+      // because ReactUpdates assumes we're in a browser context (which is wrong
+      // for server rendering) and we're about to do a render anyway.
+      // TODO: The callback here is ignored when setState is called from
+      // componentWillMount. Either fix it or disallow doing so completely in
+      // favor of getInitialState.
+      ReactUpdates.enqueueUpdate(this, callback);
+    }
   },
 
   /**

vendor/browser-transforms.js

@@ -23,8 +23,6 @@ var docblock = require('jstransform/src/docblock');
 var transform = require('jstransform').transform;
 var visitors = require('./fbtransform/visitors');
 
-var runScripts;
-var loadScripts;
 var headEl;
 var dummyAnchor;
 var inlineScriptCount = 0;