Update everything for v0.5.1

We should be doing this in the stable branch to ensure fuzzy
dependencies are met identically on subsequent releases.

In this case, browserify had a change in 2.34.3 which resulted in
JSXTransformer to be a different size. While it was a change for the
better, it was unexpected and not a change we were calling out in the
release.

This shrinkwraps to the same versions of packages we had when we shipped
0.5.0.

AUTHORS

@@ -5,6 +5,7 @@ Ben Alpert <spicyjalapeno@gmail.com>
 Ben Newman <bn@cs.stanford.edu>
 Brian Rue <brian@rollbar.com>
 Cam Spiers <camspiers@gmail.com>
+Cat Chen <catchen@fb.com>
 Cheng Lou <chenglou92@gmail.com>
 Christian Roman <chroman16@gmail.com>
 Clay Allsopp <clay.allsopp@gmail.com>
@@ -18,6 +19,7 @@ Eric Clemmons <eric@smarterspam.com>
 Greg Roodt <groodt@gmail.com>
 Harry Hull <harry.hull1@gmail.com>
 Hugo Jobling <me@thisishugo.com>
+Ian Obermiller <iano@fb.com>
 Isaac Salier-Hellendag <isaac@fb.com>
 Jakub Malinowski <jakubmal@gmail.com>
 James Ide <ide@fb.com>

CHANGELOG.md

@@ -1,3 +1,52 @@
+## 0.5.1 (October 29, 2013)
+
+### React
+
+* Fixed bug with `<input type="range">` and selection events.
+* Fixed bug with selection and focus.
+* Made it possible to unmount components from the document root.
+* Fixed bug for `disabled` attribute handling on non-`<input>` elements.
+
+### React with Addons
+
+* Fixed bug with transition and animation event detection.
+
+
+## 0.5.0 (October 16, 2013)
+
+### React
+
+* Memory usage improvements - reduced allocations in core which will help with GC pauses
+* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
+* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
+* Support for Selection events.
+* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
+* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
+* Support for additional SVG properties (`rx`, `ry`).
+* Support for using `getInitialState` and `getDefaultProps` in mixins.
+* Support mounting into iframes.
+* Bug fixes for controlled form components.
+* Bug fixes for SVG element creation.
+* Added `React.version`.
+* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
+* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
+* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
+* Began laying down work for refined performance analysis.
+* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
+* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
+
+### React with Addons (New!)
+
+* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](http://facebook.github.io/react/docs/addons.html).
+
+### JSX
+
+* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
+* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
+* Improved compatibility for Windows
+* Improved support for maintaining line numbers when transforming.
+
+
 ## 0.4.1 (July 26, 2013)
 
 ### React

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.4.1.js"></script>
+<script src="http://fb.me/react-0.5.1.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.4.1.js"></script>
+<script src="http://fb.me/JSXTransformer-0.5.1.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.4.1.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.5.1.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.4.0
+react_version: 0.5.1
 description: A JavaScript library for building user interfaces
 relative_permalinks: true
 paginate: 5

docs/_css/react.scss

@@ -391,6 +391,16 @@ section.black content {
     font-size: 24px;
   }
 
+  h1, h2, h3, h4, h5, h6 {
+    a {
+      color: $darkTextColor;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
   // H2s form documentation topic dividers. Extra space helps.
   h2 {
     margin-top: 30px;

docs/_js/live_editor.js

@@ -44,7 +44,7 @@ var CodeMirrorEditor = React.createClass({
     }
 
     return (
-      <div class={this.props.className}>
+      <div className={this.props.className}>
         {editor}
       </div>
     );
@@ -76,22 +76,22 @@ var ReactPlayground = React.createClass({
       content =
         <CodeMirrorEditor
           onChange={this.bindState('code')}
-          class="playgroundStage"
+          className="playgroundStage"
           codeText={this.state.code}
         />;
     } else if (this.state.mode === this.MODES.JS) {
       content =
-        <div class="playgroundJS playgroundStage">
+        <div className="playgroundJS playgroundStage">
             {this.getDesugaredCode()}
         </div>;
     }
 
     return (
-      <div class="playground">
-        <div class="playgroundCode">
+      <div className="playground">
+        <div className="playgroundCode">
           {content}
         </div>
-        <div class="playgroundPreview">
+        <div className="playgroundPreview">
           <div ref="mount" />
         </div>
       </div>
@@ -121,7 +121,7 @@ var ReactPlayground = React.createClass({
       }
     } catch (e) {
       React.renderComponent(
-        <div content={e.toString()} class="playgroundError" />,
+        <div content={e.toString()} className="playgroundError" />,
         mountNode
       );
     }

docs/_plugins/header_links.rb

@@ -11,7 +11,7 @@ class Redcarpet::Render::HTML
       .gsub(/\s+/, "-")
       .gsub(/[^A-Za-z0-9\-_.]/, "")
 
-    return "<h#{level} id=\"#{clean_title}\">#{title}</h#{level}>"
+    return "<h#{level} id=\"#{clean_title}\"><a href=\"##{clean_title}\">#{title}</a></h#{level}>"
   end
 end
 

docs/_posts/2013-10-16-react-v0.5.0.md

@@ -0,0 +1,52 @@
+---
+title: "React v0.5"
+layout: post
+author: Paul O'Shannessy
+---
+
+This release is the result of several months of hard work from members of the team and the community. While there are no groundbreaking changes in core, we've worked hard to improve performance and memory usage. We've also worked hard to make sure we are being consistent in our usage of DOM properties.
+
+The biggest change you'll notice as a developer is that we no longer support `class` in JSX as a way to provide CSS classes. Since this prop was being converted to `className` at the transform step, it caused some confusion when trying to access it in composite components. As a result we decided to make our DOM properties mirror their counterparts in the JS DOM API. There are [a few exceptions](https://github.com/facebook/react/blob/master/src/dom/DefaultDOMPropertyConfig.js#L156) where we deviate slightly in an attempt to be consistent internally.
+
+The other major change in v0.5 is that we've added an additional build - `react-with-addons` - which adds support for some extras that we've been working on including animations and two-way binding. [Read more about these addons in the docs](/react/docs/addons.html).
+
+## Thanks to Our Community
+
+We added *22 new people* to the list of authors since we launched React v0.4.1 nearly 3 months ago. With a total of 48 names in our `AUTHORS` file, that means we've nearly doubled the number of contributors in that time period. We've seen the number of people contributing to discussion on IRC, mailing lists, Stack Overflow, and GitHub continue rising. We've also had people tell us about talks they've given in their local community about React.
+
+It's been awesome to see the things that people are building with React, and we can't wait to see what you come up with next!
+
+
+## Changelog
+
+### React
+
+* Memory usage improvements - reduced allocations in core which will help with GC pauses
+* Performance improvements - in addition to speeding things up, we made some tweaks to stay out of slow path code in V8 and Nitro.
+* Standardized prop -> DOM attribute process. This previously resulting in additional type checking and overhead as well as confusing cases for users. Now we will always convert your value to a string before inserting it into the DOM.
+* Support for Selection events.
+* Support for [Composition events](https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent).
+* Support for additional DOM properties (`charSet`, `content`, `form`, `httpEquiv`, `rowSpan`, `autoCapitalize`).
+* Support for additional SVG properties (`rx`, `ry`).
+* Support for using `getInitialState` and `getDefaultProps` in mixins.
+* Support mounting into iframes.
+* Bug fixes for controlled form components.
+* Bug fixes for SVG element creation.
+* Added `React.version`.
+* Added `React.isValidClass` - Used to determine if a value is a valid component constructor.
+* Removed `React.autoBind` - This was deprecated in v0.4 and now properly removed.
+* Renamed  `React.unmountAndReleaseReactRootNode` to `React.unmountComponentAtNode`.
+* Began laying down work for refined performance analysis.
+* Better support for server-side rendering - [react-page](https://github.com/facebook/react-page) has helped improve the stability for server-side rendering.
+* Made it possible to use React in environments enforcing a strict [Content Security Policy](https://developer.mozilla.org/en-US/docs/Security/CSP/Introducing_Content_Security_Policy). This also makes it possible to use React to build Chrome extensions.
+
+### React with Addons (New!)
+
+* Introduced a separate build with several "addons" which we think can help improve the React experience. We plan to deprecate this in the long-term, instead shipping each as standalone pieces. [Read more in the docs](/react/docs/addons.html).
+
+### JSX
+
+* No longer transform `class` to `className` as part of the transform! This is a breaking change - if you were using `class`, you *must* change this to `className` or your components will be visually broken.
+* Added warnings to the in-browser transformer to make it clear it is not intended for production use.
+* Improved compatibility for Windows
+* Improved support for maintaining line numbers when transforming.

docs/docs/09-addons.md

@@ -33,14 +33,14 @@ var TodoList = React.createClass({
   },
   handleRemove: function(i) {
     var newItems = this.state.items;
-    newItems.splice(i, 0)
+    newItems.splice(i, 1)
     this.setState({items: newItems});
   },
   render: function() {
     var items = this.state.items.map(function(item, i) {
       return (
         <div key={i} onClick={this.handleRemove.bind(this, i)}>
-          {item}}
+          {item}
         </div>
       );
     }.bind(this));

docs/docs/OUTLINE.md

@@ -1,96 +0,0 @@
----
-id: OUTLINE
-title: Goals of the documentation
-layout: docs
-prev: 09.1-tutorial.html
----
-- Flow of docs should mimic progression of questions a new user would ask
-- High information density -- assume the reader is adept at JS
-- Talk about best practices
-- JSFiddles for all code samples
-- Provide background for some of the design decisions
-- Less words less words less words!
-
-## Outline
-
-Motivation / Why React?
-- Declarative (simple)
-- Components (separation of concerns)
-- Give it 5 minutes
-
-Displaying data
-- Hello world example
-- Reactive updates
-- Components are just functions
-- JSX syntax (link to separate doc?)
-- JSX gotchas
-
-Interactivity and dynamic UIs
-- Click handler example
-- Event handlers / synthetic events (link to w3c docs)
-- Under the hood: autoBind and event delegation (IE8 notes)
-- React is a state machine
-- How state works
-- What components should have state?
-- What should go in state?
-- What shouldn't go in state?
-
-Scaling up: using multiple components
-- Motivation: separate concerns
-- Composition example
-- Ownership (and owner vs. parent)
-- Children
-- Data flow (one-way data binding)
-- A note on performance
-
-Building effective reusable components
-- You should build a reusable component library (CSS, testing etc)
-- Prop validation
-- Transferring props: a shortcut
-- Mixins
-- Testing
-
-Forms
-
-Working with the browser
-- The mock DOM
-- Refs / getDOMNode()
-- More about refs
-- Component lifecycle
-- Browser support and polyfills
-
-Working with your environment
-- CDN-hosted React
-- Using master
-- In-browser JSX transform
-- Productionizing: precompiled JSX
-- Helpful open-source projects
-
-Integrating with other UI libraries
-- Using jQuery plugins
-- Letting jQuery manage React components
-- Using with Backbone.View
-- CoffeeScript
-- Moving from Handlebars to React: an example
-
-Server / static rendering
-- Motivation
-- Simple example
-- How does it work? (No DOM)
-- Rendr + React
-
-Big ideas
-- Animation
-- Bootstrap bindings (responsive grids)
-- Reactive CSS
-- Web workers
-- Native views
-
-Case studies
-- Comment box tutorial from scratch
-- From HTML mock to application: React one-hour email
-- Jordan's LikeToggler example
-
-Reference
-- API
-- DOM differences

docs/docs/ref-01-top-level-api.md

@@ -53,14 +53,18 @@ If the React component was previously rendered into `container`, this will perfo
 If the optional callback is provided, it will be executed after the component is rendered or updated.
 
 
-### React.unmountAndReleaseReactRootNode
+### React.unmountComponentAtNode
 
 ```javascript
-unmountAndReleaseReactRootNode(DOMElement container)
+unmountComponentAtNode(DOMElement container)
 ```
 
 Remove a mounted React component from the DOM and clean up its event handlers and state.
 
+> Note:
+>
+> This method was called `React.unmountAndReleaseReactRootNode` until v0.5. It still works in v0.5 but will be removed in future versions.
+
 
 ### React.renderComponentToString
 

docs/docs/ref-05-events.md

@@ -128,25 +128,6 @@ boolean shiftKey
 ```
 
 
-### Mutation Events
-
-Event names:
-
-```
-onDOMCharacterDataModified
-```
-
-Properties:
-
-```javascript
-Number attrChange
-String attrName
-String newValue
-String prevValue
-Node relatedNode
-```
-
-
 ### Touch events
 
 To enable touch events, call `React.initializeTouchEvents(true)` before

grunt/tasks/npm.js

@@ -64,8 +64,8 @@ module.exports = function() {
           var pkgDir = path.join(nodePath, pkg.name);
           var doneCount = 2;
 
-          // Make sure that bin/jsx-internal is runnable by echoing main.js.
-          run("bin/jsx-internal", ["main.js"], {
+          // Make sure that bin/jsx is runnable by echoing main.js.
+          run("bin/jsx", ["main.js"], {
             cwd: pkgDir
           }, function(result) {
             assert.ok(result.stdout.indexOf("transform") >= 0, result.stdout);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-tools",
-  "version": "0.5.0-alpha",
+  "version": "0.5.1",
   "keywords": [
     "react",
     "jsx",

src/addons/transitions/ReactTransitionEvents.js

@@ -44,9 +44,10 @@ function detectEvents() {
   var testEl = document.createElement('div');
   var style = testEl.style;
   for (var baseEventName in EVENT_NAME_MAP) {
-    for (var styleName in baseEventName) {
+    var baseEvents = EVENT_NAME_MAP[baseEventName];
+    for (var styleName in baseEvents) {
       if (styleName in style) {
-        endEvents.push(EVENT_NAME_MAP[styleName]);
+        endEvents.push(baseEvents[styleName]);
         break;
       }
     }

src/core/React.js

@@ -66,6 +66,6 @@ var React = {
 
 // Version exists only in the open-source version of React, not in Facebook's
 // internal version.
-React.version = '0.5.0-alpha';
+React.version = '0.5.1';
 
 module.exports = React;

src/core/ReactMount.js

@@ -430,6 +430,10 @@ var ReactMount = {
   unmountComponentFromNode: function(instance, container) {
     instance.unmountComponent();
 
+    if (container.nodeType === DOC_NODE_TYPE) {
+      container = container.documentElement;
+    }
+
     // http://jsperf.com/emptying-a-node
     while (container.lastChild) {
       container.removeChild(container.lastChild);
@@ -592,6 +596,8 @@ var ReactMount = {
 
   ATTR_NAME: ATTR_NAME,
 
+  getReactRootID: getReactRootID,
+
   getID: getID,
 
   setID: setID,

src/core/__tests__/ReactRenderDocument-test.js

@@ -39,6 +39,66 @@ describe('rendering React components at document', function() {
     testDocument = getTestDocument();
   });
 
+  it('should be able to get root component id for document node', function() {
+    if (!testDocument) {
+      // These tests are not applicable in jst, since jsdom is buggy.
+      return;
+    }
+
+    var Root = React.createClass({
+      render: function() {
+        return (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Hello world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    ReactMount.allowFullPageRender = true;
+    var component = React.renderComponent(<Root />, testDocument);
+    expect(testDocument.body.innerHTML).toBe(' Hello world ');
+
+    var componentID = ReactMount.getReactRootID(testDocument);
+    expect(componentID).toBe(component._rootNodeID);
+  });
+
+  it('should be able to unmount component from document node', function() {
+    if (!testDocument) {
+      // These tests are not applicable in jst, since jsdom is buggy.
+      return;
+    }
+
+    var Root = React.createClass({
+      render: function() {
+        return (
+          <html>
+            <head>
+              <title>Hello World</title>
+            </head>
+            <body>
+              Hello world
+            </body>
+          </html>
+        );
+      }
+    });
+
+    ReactMount.allowFullPageRender = true;
+    React.renderComponent(<Root />, testDocument);
+    expect(testDocument.body.innerHTML).toBe(' Hello world ');
+
+    var unmounted = React.unmountComponentAtNode(testDocument);
+    expect(unmounted).toBe(true);
+    expect(testDocument.documentElement).not.toBe(null);
+    expect(testDocument.documentElement.innerHTML).toBe('');
+  });
+
   it('should be able to switch root constructors via state', function() {
     if (!testDocument) {
       // These tests are not applicable in jst, since jsdom is buggy.

src/core/getReactRootElementInContainer.js

@@ -18,12 +18,23 @@
 
 "use strict";
 
+var DOC_NODE_TYPE = 9;
+
 /**
- * @param {DOMElement} container DOM element that may contain a React component
+ * @param {DOMElement|DOMDocument} container DOM element that may contain
+ *                                           a React component
  * @return {?*} DOM element that may have the reactRoot ID, or null.
  */
 function getReactRootElementInContainer(container) {
-  return container && container.firstChild;
+  if (!container) {
+    return null;
+  }
+
+  if (container.nodeType === DOC_NODE_TYPE) {
+    return container.documentElement;
+  } else {
+    return container.firstChild;
+  }
 }
 
 module.exports = getReactRootElementInContainer;

src/dom/Danger.js

@@ -147,7 +147,7 @@ var Danger = {
 
     invariant(
       resultList.length === markupList.length,
-      'Danger: Expected markup to render %d nodes, but rendered %d.',
+      'Danger: Expected markup to render %s nodes, but rendered %s.',
       markupList.length,
       resultList.length
     );

src/dom/DefaultDOMPropertyConfig.js

@@ -57,7 +57,7 @@ var DefaultDOMPropertyConfig = {
     data: null, // For `<object />` acts as `src`.
     dateTime: MUST_USE_ATTRIBUTE,
     dir: null,
-    disabled: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
+    disabled: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
     draggable: null,
     encType: null,
     form: MUST_USE_ATTRIBUTE,

src/eventPlugins/SelectEventPlugin.js

@@ -22,6 +22,7 @@ var EventConstants = require('EventConstants');
 var EventPluginHub = require('EventPluginHub');
 var EventPropagators = require('EventPropagators');
 var ExecutionEnvironment = require('ExecutionEnvironment');
+var ReactInputSelection = require('ReactInputSelection');
 var SyntheticEvent = require('SyntheticEvent');
 
 var getActiveElement = require('getActiveElement');
@@ -65,7 +66,8 @@ var mouseDown = false;
  * @param {object}
  */
 function getSelection(node) {
-  if ('selectionStart' in node) {
+  if ('selectionStart' in node &&
+      ReactInputSelection.hasSelectionCapabilities(node)) {
     return {
       start: node.selectionStart,
       end: node.selectionEnd
@@ -180,14 +182,12 @@ var SelectEventPlugin = {
           activeElement = topLevelTarget;
           activeElementID = topLevelTargetID;
           lastSelection = null;
-          mouseDown = false;
         }
         break;
       case topLevelTypes.topBlur:
         activeElement = null;
         activeElementID = null;
         lastSelection = null;
-        mouseDown = false;
         break;
 
       // Don't fire the event while the user is dragging. This matches the