Changelog, Readme updates for v0.12.1

Cherry-pick jstransform, strip-types upgrades and re-shrinkwrap

CHANGELOG.md

@@ -1,3 +1,12 @@
+## 0.12.1 (November 18, 2014)
+
+### React Tools
+
+* Types transform updated with latest support
+* jstransform version updated with improved ES6 transforms
+* Explicit Esprima dependency removed in favor of using Esprima information exported by jstransform
+
+
 ## 0.12.0 (October 28, 2014)
 
 ### React Core

README.md

@@ -35,12 +35,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.12.0.js"></script>
+<script src="http://fb.me/react-0.12.1.js"></script>
 <!-- In-browser JSX transformer, remove when pre-compiling JSX. -->
-<script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
+<script src="http://fb.me/JSXTransformer-0.12.1.js"></script>
 ```
 
-We've also built a [starter kit](http://facebook.github.io/react/downloads/react-0.12.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.12.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

@@ -34,4 +34,4 @@ sass:
   sass_dir: _css
 gems:
 - jekyll-redirect-from
-react_version: 0.11.2
+react_version: 0.12.1

docs/_js/jsfiddle-integration.js

@@ -0,0 +1,11 @@
+(function() {
+  var tag = document.querySelector(
+    'script[type="application/javascript;version=1.7"]'
+  );
+  if (!tag || tag.textContent.indexOf('window.onload=function(){') !== -1) {
+    alert('Bad JSFiddle configuration, please fork the original React JSFiddle');
+  }
+  tag.setAttribute('type', 'text/jsx;harmony=true');
+  tag.textContent = tag.textContent.replace(/^\/\/<!\[CDATA\[/, '');
+})();
+

docs/docs/02.2-jsx-spread.md

@@ -6,7 +6,7 @@ prev: jsx-in-depth.html
 next: jsx-gotchas.html
 ---
 
-If you know all the properties that you want to place on a component a head of time, it is easy to use JSX:
+If you know all the properties that you want to place on a component ahead of time, it is easy to use JSX:
 
 ```javascript
   var component = <Component foo={x} bar={y} />;

docs/docs/03-interactivity-and-dynamic-uis.md

@@ -45,9 +45,9 @@ If you'd like to use React on a touch device such as a phone or tablet, simply c
 
 ## Under the Hood: Autobinding and Event Delegation
 
-Under the hood React does a few things to keep your code performant and easy to understand.
+Under the hood, React does a few things to keep your code performant and easy to understand.
 
-**Autobinding:** When creating callbacks in JavaScript you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
+**Autobinding:** When creating callbacks in JavaScript, you usually need to explicitly bind a method to its instance such that the value of `this` is correct. With React, every method is automatically bound to its component instance. React caches the bound method such that it's extremely CPU and memory efficient. It's also less typing!
 
 **Event delegation:** React doesn't actually attach event handlers to the nodes themselves. When React starts up, it starts listening for all events at the top level using a single event listener. When a component is mounted or unmounted, the event handlers are simply added or removed from an internal mapping. When an event occurs, React knows how to dispatch it using this mapping. When there are no event handlers left in the mapping, React's event handlers are simple no-ops. To learn more about why this is fast, see [David Walsh's excellent blog post](http://davidwalsh.name/event-delegate).
 

docs/docs/05-reusable-components.md

@@ -25,12 +25,12 @@ React.createClass({
     optionalObject: React.PropTypes.object,
     optionalString: React.PropTypes.string,
 
-    // Anything that can be rendered: numbers, strings, components or an array
+    // Anything that can be rendered: numbers, strings, elements or an array
     // containing these types.
-    optionalRenderable: React.PropTypes.renderable,
+    optionalNode: React.PropTypes.node,
 
-    // A React component.
-    optionalComponent: React.PropTypes.component,
+    // A React element.
+    optionalElement: React.PropTypes.element,
 
     // You can also declare that a prop is an instance of a class. This uses
     // JS's instanceof operator.
@@ -120,13 +120,13 @@ React.render(
 
 ## Single Child
 
-With `React.PropTypes.component` you can specify that only a single child can be passed to
+With `React.PropTypes.element` you can specify that only a single child can be passed to
 a component as children.
 
 ```javascript
 var MyComponent = React.createClass({
   propTypes: {
-    children: React.PropTypes.component.isRequired
+    children: React.PropTypes.element.isRequired
   },
 
   render: function() {

docs/docs/06-transferring-props.md

@@ -37,7 +37,7 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
+React.render(
   <FancyCheckbox checked={true} onClick={console.log}>
     Hello world!
   </FancyCheckbox>,
@@ -70,7 +70,7 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
+React.render(
   <FancyCheckbox checked={true} onClick={console.log}>
     Hello world!
   </FancyCheckbox>,

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

@@ -57,10 +57,10 @@ Remove a mounted React component from the DOM and clean up its event handlers an
 ### React.renderToString
 
 ```javascript
-string renderToString(ReactComponent component)
+string renderToString(ReactElement element)
 ```
 
-Render a component to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
+Render a ReactElement to its initial HTML. This should only be used on the server. React will return an HTML string. You can use this method to generate HTML on the server and send the markup down on the initial request for faster page loads and to allow search engines to crawl your pages for SEO purposes.
 
 If you call `React.render()` on a node that already has this server-rendered markup, React will preserve it and only attach event handlers, allowing you to have a very performant first-load experience.
 
@@ -68,7 +68,7 @@ If you call `React.render()` on a node that already has this server-rendered mar
 ### React.renderToStaticMarkup
 
 ```javascript
-string renderToStaticMarkup(ReactComponent component)
+string renderToStaticMarkup(ReactElement element)
 ```
 
 Similar to `renderToString`, except this doesn't create extra DOM attributes such as `data-react-id`, that React uses internally. This is useful if you want to use React as a simple static page generator, as stripping away the extra attributes can save lots of bytes.

docs/docs/tutorial.md

@@ -25,7 +25,7 @@ It'll also have a few neat features:
 
 ### Getting started
 
-For this tutorial we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:
+For this tutorial, we'll use prebuilt JavaScript files on a CDN. Open up your favorite editor and create a new HTML document:
 
 ```html
 <!-- template.html -->

docs/tips/03-if-else-in-JSX.md

@@ -24,7 +24,7 @@ This means that `if` statements don't fit in. Take this example:
 <div id={if (condition) { 'msg' }}>Hello World!</div>
 
 // Is transformed to this JS:
-React.createElement("dov", {id: if (condition) { 'msg' }}, "Hello World!");
+React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");
 ```
 
 That's not valid JS. You probably want to make use of a ternary expression:

main.js

@@ -2,6 +2,7 @@
 
 var visitors = require('./vendor/fbtransform/visitors');
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var Buffer = require('buffer').Buffer;
 
 module.exports = {
@@ -37,7 +38,11 @@ function innerTransform(input, options) {
     visitorSets.push('harmony');
   }
   if (options.stripTypes) {
-    visitorSets.push('type-annotations');
+    // Stripping types needs to happen before the other transforms
+    // unfortunately, due to bad interactions. For example,
+    // es6-rest-param-visitors conflict with stripping rest param type
+    // annotation
+    input = transform(typesSyntax.visitorList, input, options).code;
   }
 
   var visitorList = visitors.getVisitorsBySet(visitorSets);

npm-react/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react",
   "description": "React is a JavaScript library for building user interfaces.",
-  "version": "0.12.0-rc1",
+  "version": "0.12.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.12.0-rc1",
+  "version": "0.12.1",
   "keywords": [
     "react",
     "jsx",
@@ -27,8 +27,7 @@
   },
   "dependencies": {
     "commoner": "^0.10.0",
-    "esprima-fb": "^6001.1.0-dev-harmony-fb",
-    "jstransform": "^6.3.2"
+    "jstransform": "^8.2.0"
   },
   "devDependencies": {
     "benchmark": "~1.0.0",

perf/tests/propTypes.js

@@ -18,7 +18,7 @@ exports.setup = function(){
       number: React.PropTypes.number,
       string: React.PropTypes.string.isRequired,
       func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
+      node: React.PropTypes.node.isRequired,
       instanceOf: React.PropTypes.instanceOf(Thing).isRequired
     },
     render: function() {
@@ -33,14 +33,14 @@ exports.setup = function(){
       number: React.PropTypes.number,
       string: React.PropTypes.string.isRequired,
       func: React.PropTypes.func.isRequired,
-      renderable: React.PropTypes.renderable.isRequired,
-      renderable2: React.PropTypes.renderable.isRequired,
+      node: React.PropTypes.node.isRequired,
+      node2: React.PropTypes.node.isRequired,
       instanceOf: React.PropTypes.instanceOf(Thing).isRequired,
-      component: React.PropTypes.component.isRequired
+      element: React.PropTypes.element.isRequired
     },
     render: function(){
       return React.DOM.li(null,
-        this.props.number + this.props.string + this.props.renderable
+        this.props.number + this.props.string + this.props.node
       );
     }
   });
@@ -63,10 +63,10 @@ exports.fn = function(){
       number: Math.random(),
       string: 'banana banana banana',
       func: function() { return 'this is a function'; },
-      renderable: 'renderable string',
-      renderable2: [MyReactComponent(), 'a string'],
+      node: 'renderable string',
+      node2: [MyReactComponent(), 'a string'],
       instanceOf: new Thing,
-      component: MyReactComponent()
+      element: MyReactComponent()
     }));
   };
 

src/browser/ui/React.js

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

vendor/browser-transforms.js

@@ -13,6 +13,7 @@
 
 var buffer = require('buffer');
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var visitors = require('./fbtransform/visitors');
 
 var headEl;
@@ -42,6 +43,14 @@ function transformReact(source, options) {
     visitorList = visitors.transformVisitors.react;
   }
 
+  if (options.stripTypes) {
+    // Stripping types needs to happen before the other transforms
+    // unfortunately, due to bad interactions. For example,
+    // es6-rest-param-visitors conflict with stripping rest param type
+    // annotation
+    source = transform(typesSyntax.visitorList, source, options).code;
+  }
+
   return transform(visitorList, source, {
     sourceMap: supportsAccessors && options.sourceMap
   });
@@ -240,6 +249,9 @@ function loadScripts(scripts) {
     if (/;harmony=true(;|$)/.test(script.type)) {
       options.harmony = true
     }
+    if (/;stripTypes=true(;|$)/.test(script.type)) {
+      options.stripTypes = true;
+    }
 
     // script.async is always true for non-javascript script tags
     var async = script.hasAttribute('async');

vendor/fbtransform/syntax.js

@@ -4,6 +4,7 @@
 "use strict";
 
 var transform = require('jstransform').transform;
+var typesSyntax = require('jstransform/visitors/type-syntax');
 var visitors = require('./visitors');
 
 /**
@@ -16,6 +17,12 @@ var visitors = require('./visitors');
 function transformAll(source, options, excludes) {
   excludes = excludes || [];
 
+  // Stripping types needs to happen before the other transforms
+  // unfortunately, due to bad interactions. For example,
+  // es6-rest-param-visitors conflict with stripping rest param type
+  // annotation
+  source = transform(typesSyntax.visitorList, source, options).code;
+
   // The typechecker transform must run in a second pass in order to operate on
   // the entire source code -- so exclude it from the first pass
   var visitorsList = visitors.getAllVisitors(excludes.concat('typechecker'));

vendor/fbtransform/transforms/react.js

@@ -9,7 +9,7 @@
 /*global exports:true*/
 "use strict";
 
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 var FALLBACK_TAGS = require('./xjs').knownTags;

vendor/fbtransform/transforms/reactDisplayName.js

@@ -9,7 +9,7 @@
 /*global exports:true*/
 "use strict";
 
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 function addDisplayName(displayName, object, state) {

vendor/fbtransform/transforms/xjs.js

@@ -8,7 +8,7 @@
  */
 /*global exports:true*/
 "use strict";
-var Syntax = require('esprima-fb').Syntax;
+var Syntax = require('jstransform').Syntax;
 var utils = require('jstransform/src/utils');
 
 var knownTags = {

vendor/fbtransform/visitors.js

@@ -9,7 +9,6 @@ var es6Templates = require('jstransform/visitors/es6-template-visitors');
 var es7SpreadProperty = require('jstransform/visitors/es7-spread-property-visitors');
 var react = require('./transforms/react');
 var reactDisplayName = require('./transforms/reactDisplayName');
-var typesSyntax = require('jstransform/visitors/type-syntax');
 
 /**
  * Map from transformName => orderedListOfVisitors.
@@ -23,8 +22,7 @@ var transformVisitors = {
   'es6-rest-params': es6RestParameters.visitorList,
   'es6-templates': es6Templates.visitorList,
   'es7-spread-property': es7SpreadProperty.visitorList,
-  'react': react.visitorList.concat(reactDisplayName.visitorList),
-  'types': typesSyntax.visitorList
+  'react': react.visitorList.concat(reactDisplayName.visitorList)
 };
 
 var transformSets = {
@@ -40,9 +38,6 @@ var transformSets = {
   ],
   'react': [
     'react'
-  ],
-  'type-annotations': [
-    'types'
   ]
 };
 
@@ -50,7 +45,6 @@ var transformSets = {
  * Specifies the order in which each transform should run.
  */
 var transformRunOrder = [
-  'types',
   'es6-arrow-functions',
   'es6-object-concise-method',
   'es6-object-short-notation',