Merge pull request #2724 from zpao/release-0.12.2

Release 0.12.2

CHANGELOG.md

@@ -1,3 +1,26 @@
+## 0.12.2 (December 18, 2014)
+
+### React Core
+
+* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+* Added `strokeOpacity` to the list of unitless CSS properties
+* Removed trailing commas (allows npm module to be bundled and used in IE8)
+* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools
+
+* JSX-related transforms now always use double quotes for props and `displayName`
+
+
+## 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

CONTRIBUTING.md

@@ -67,4 +67,4 @@ Facebook has a [bounty program](https://www.facebook.com/whitehat/) for the safe
 
 ## License
 
-By contributing to React, you agree that your contributions will be licensed under its BSD license..
+By contributing to React, you agree that your contributions will be licensed under its BSD license.

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.2.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.2.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.2.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.2

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/_js/jsx-compiler.js

@@ -37,7 +37,7 @@ var CompilerPlayground = React.createClass({
         </label>
       </div>
     );
-  },
+  }
 });
 React.render(
   <CompilerPlayground />,

docs/_posts/2014-10-17-community-roundup-23.md

@@ -61,7 +61,7 @@ Yahoo is converting Yahoo Mail to React and Flux and in the process, they open s
 >
 > - There should be only one channel for all state changes: The Dispatcher. This makes debugging easy because it just requires a single console.log in the dispatcher to observe every single state change trigger.
 >
-> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just to hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
+> - Asynchronously executed callbacks should not leak into Stores. The consequences of it are just too hard to fully foresee. This leads to elusive bugs. Stores should only execute synchronous code. Otherwise they are too hard to understand.
 >
 > - Avoiding actions firing other actions makes your app simple. We use the newest Dispatcher implementation from Facebook that does not allow a new dispatch while dispatching. It forces you to do things right.
 >

docs/_posts/2014-11-24-react-js-conf-updates.md

@@ -0,0 +1,39 @@
+---
+title: React.js Conf Updates
+author: Vjeux
+---
+
+Yesterday was the [React.js Conf](http://conf.reactjs.com/index.html) call for presenters submission deadline. We were
+surprised to have received a total of **one hundred talk proposals** and were
+amazed that 600 people requested to be notified when ticket go on sale. This is incredible!
+
+When we organized the conference, we decided to start small since this is the
+first React.js conference. Also, we weren't sure what level of demand to expect,
+so we planned for a single-track, two-day conference on Facebook's campus. The
+largest room available would accomodate 18 speaking slots and 200 attendees.
+The spacial configuration makes it difficult to add a second track and changing
+venues only two months in advance would be too difficult, so we are deciding to
+stick with the originally planned format and venue on Facebook's campus.
+
+Unfortunately, this means that we can only accept a small number of the awesome
+conference talk proposals. In order to make sure attendees get a fair shot at
+registering, we're going to to sell tickets in three separate first-come,
+first-serve phases. **Tickets will cost $200 regardless of which phase they are
+purchased from and all proceeds will go to charity**.
+
+- Friday November 28th 2014 — Noon PST: First wave of tickets
+- Friday December 5th 2014 — Noon PST: Second wave of tickets
+- Friday December 12th 2014 — Noon PST: Third and last wave of tickets
+
+We really do wish that everyone could attend React.js Conf, but in order to
+ensure a quality experience for those who attend, we feel it will be best to
+limit the size of the conference to what was originally planned for. This means
+that not everyone who wants to attend will be able to, and many talks that
+would be excellent contributions to the conference will have to be postponed
+until the next conference. All the talks will be recorded and put online shortly after.
+
+We hope to see many of you at React.js Conf this January.
+
+Sincerely,
+
+React Core Team

docs/_posts/2014-11-25-community-roundup-24.md

@@ -0,0 +1,99 @@
+---
+title: "Community Round-up #24"
+layout: post
+author: Steven Luscher
+---
+
+## Keep it Simple
+
+Pedro Nauck ([pedronauck](https://github.com/pedronauck)) delivered an impeccably illustrated deck at Brazil's _Front in Floripa_ conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.
+
+<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>
+
+Murilo Pereira ([mpereira](https://github.com/mpereira)) tussles with the topic of complexity in this blog post about [coping with scaling up](http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/), where he describes how his team used React to make possible the “nearly impossible.”
+
+I ([steveluscher](https://github.com/steveluscher)) spoke at Manning Publications' “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>
+
+James Pearce ([jamesgpearce](https://github.com/jamesgpearce)) carried Big-Coffee all the way to Raleigh, NC. At the _All Things Open_ conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.
+
+<iframe width="560" height="315" src="//www.youtube.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>
+
+## All About Isomorphism
+
+Michael Ridgway ([mridgway](https://github.com/mridgway)) shows us how Yahoo! (who recently [moved Yahoo! Mail to React](http://www.slideshare.net/rmsguhan/react-meetup-mailonreact)) renders their React+Flux application, server-side.
+
+<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>
+
+Péter Márton ([hekike](https://github.com/hekike)) helps us brew a cold one (literally) using an application that's server-client [isomorphic and indexable](http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/). Demo and sample code included – cold ones sold separately.
+
+And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker ([nhunzaker](https://github.com/nhunzaker)) [server renders data visualizations as SVG](http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization) with React.
+
+## React Router Mows the Lawn
+
+Ryan Florence ([rpflorence](https://github.com/rpflorence])) and Michael Jackson ([mjackson](https://github.com/mjackson)) unveiled a new API for [React Router](https://github.com/rackt/react-router) that solves some of its user's problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they've [rolled your ideas into their latest release](https://github.com/rackt/react-router/wiki/Announcements).
+
+## React in Practice
+
+Jonathan Beebe ([somethingkindawierd](https://github.com/somethingkindawierd)) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year's _Nodevember_ conference in Nashville
+
+<iframe width="420" height="315" src="//www.youtube.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>
+
+If you take a peek under the covers, you'll find that React powers [Carousel](https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/), Dropbox's new photo and video gallery app.
+
+We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “[The Vanishing Game](https://thevanishinggame.wellstoried.com)” and see for yourself.
+
+## Be Kind, Rewind
+
+Spend the next 60 seconds watching Daniel Woelfel ([dwwoelfel](https://github.com/dwwoelfel)) serialize a React app's state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to [reproduce bugs](http://blog.circleci.com/local-state-global-concerns/) reported to him by his users.
+
+<iframe width="420" height="315" src="//www.youtube.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>
+
+## Community Components
+
+Tom Chen ([tomchentw](https://github.com/tomchentw)) brings us a [react-google-maps](http://tomchentw.github.io/react-google-maps/) component, and a way to syntax highlight source code using Prism and the [react-prism](http://tomchentw.github.io/react-prism/) component, for good measure.
+
+Jed Watson ([jedwatson](https://github.com/JedWatson)) helps you manage touch, tap, and press events using the [react-tappable](https://github.com/JedWatson/react-tappable) component.
+
+To find these, and more community-built components, consult the [React Components](http://react-components.com/) and [React Rocks](http://react.rocks) component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword `react-component` to your `package.json` to get listed on React Components, and [submit a link to React Rocks](https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform).
+
+## Waiter, There's a CSS In My JavaScript
+
+The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau ([vjeux](https://github.com/vjeux)) talks about some of the [fundamental style management challenges](https://speakerdeck.com/vjeux/react-css-in-js) we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused [react-style](https://github.com/js-next/react-style).
+
+## Test Isolation
+
+Yahoo! shows us how they make use of `iframe` elements to [unit test React components in isolation](http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil).
+
+## You've Got The Hang of Flux, Now Let's Flow
+
+Facebook Open Source released [Flow](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/) this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to [type check React applications](https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility). There's never been a better reason to start making use of `propTypes` in your component specifications!
+
+## Countdown to React.js Conf 2014
+
+We're counting down the days until [React.js Conf](http://conf.reactjs.com) at Facebook's headquarters in Menlo Park, California, on January 28th & 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.
+
+## React Meetups Around the World
+
+<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>&mdash; ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>&mdash; rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
+  </div>
+</div>
+
+<div class="skinny-row">
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I&#39;ll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
+  </div>
+  <div class="skinny-col">
+    <blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I&#39;m presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>&mdash; Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
+  </div>
+</div>
+
+<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

docs/_posts/2014-12-18-react-v0.12.2.md

@@ -0,0 +1,37 @@
+---
+title: React v0.12.2
+author: Paul O’Shannessy
+---
+
+We just shipped React v0.12.2, bringing the 0.12 branch up to date with a few small fixes that landed in master over the past 2 months.
+
+You may have noticed that we did not do an announcement for v0.12.1. That release was snuck out in anticipation of [Flow](http://flowtype.org/), with only transform-related changes. Namely we added a flag to the `jsx` executable which allowed you to safely transform Flow-based code to vanilla JS. If you didn't update for that release, you can safely skip it and move directly to v0.12.2.
+
+The release is available for download from the CDN:
+
+* **React**  
+  Dev build with warnings: <http://fb.me/react-0.12.2.js>  
+  Minified build for production: <http://fb.me/react-0.12.2.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <http://fb.me/react-with-addons-0.12.2.js>  
+  Minified build for production: <http://fb.me/react-with-addons-0.12.2.min.js>  
+* **In-Browser JSX transformer**  
+  <http://fb.me/JSXTransformer-0.12.2.js>
+
+We've also published version `0.12.2` of the `react` and `react-tools` packages on npm and the `react` package on bower. `0.12.1` is also available in the same locations if need those.
+
+Please try these builds out and [file an issue on GitHub](https://github.com/facebook/react/issues/new) if you see anything awry.
+
+## Changelog
+
+### React Core
+
+* Added support for more HTML attributes: `formAction`, `formEncType`, `formMethod`, `formTarget`, `marginHeight`, `marginWidth`
+* Added `strokeOpacity` to the list of unitless CSS properties
+* Removed trailing commas (allows npm module to be bundled and used in IE8)
+* Fixed bug resulting in error when passing `undefined` to `React.createElement` - now there is a useful warning
+
+### React Tools
+
+* JSX-related transforms now always use double quotes for props and `displayName`
+

docs/css/react.scss

@@ -288,6 +288,19 @@ h1, h2, h3, h4, h5, h6 {
   width: 400px;
 }
 
+.skinny-row {
+  @include clearfix;
+}
+
+.skinny-col {
+  float: left;
+  margin-left: $columnGutter;
+  width: ($skinnyContentWidth - $columnGutter) / 2;
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
 .marketing-row {
   @include clearfix;
   margin: 50px 0;

docs/docs/02-displaying-data.md

@@ -66,7 +66,7 @@ The inputs to this component are called `props` — short for "properties". They
 
 ## Components are Just Like Functions
 
-React components are very simple. You can think of them as simple function that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
+React components are very simple. You can think of them as simple functions that take in `props` and `state` (discussed later) and render HTML. Because they're so simple, it makes them very easy to reason about.
 
 > Note:
 >

docs/docs/02.1-jsx-in-depth.md

@@ -29,7 +29,7 @@ var myDivElement = <div className="foo" />;
 React.render(myDivElement, document.body);
 ```
 
-To render a React Component, just a local variable that starts with an upper-case letter:
+To render a React Component, just create a local variable that starts with an upper-case letter:
 
 ```javascript
 var MyComponent = React.createClass({/*...*/});

docs/docs/02.1-jsx-in-depth.zh-CN.md

@@ -0,0 +1,136 @@
+---
+id: jsx-in-depth-zh-CN
+title: 深入 JSX
+permalink: jsx-in-depth-zh-CN.html
+prev: displaying-data-zh-CN.html
+next: jsx-spread-zh-CN.html
+---
+
+[JSX](http://facebook.github.io/jsx/) 是一个看起来很像 XML 的 JavaScript 语法扩展。React 可以用来做简单的 JSX 句法转换。
+
+## 为什么要用 JSX？
+
+你不需要为了 React 使用 JSX，可以直接使用原生 JS。但是，我们建议使用 JSX 是因为它能精确，也是常用的定义包含属性的树状结构的语法。
+
+它对于非专职开发者比如设计师也比较熟悉。
+
+XML 有固定的标签开启和闭合的优点。这能让复杂的树更易于阅读，优于方法调用和对象字面量的形式。
+
+它没有修改 JavaScript 语义。
+
+## HTML 标签 对比 React 模块
+
+React 可以渲染 HTML 标签 (strings) 或 React 模块 (classes)。
+
+要渲染 HTML 标签，只需在 JSX 里使用小写字母开头的标签名。
+
+```javascript
+var myDivElement = <div className="foo" />;
+React.render(myDivElement, document.body);
+```
+
+要渲染 React 模块，只需创建一个大写字母开头的本地变量。
+
+```javascript
+var MyComponent = React.createClass({/*...*/});
+var myElement = <MyComponent someProperty={true} />;
+React.render(myElement, document.body);
+```
+
+React 的 JSX 里约定分别使用首字母大、小写来区分本地模块的类和 HTML 标签。
+
+> 提示:
+>
+> 由于 JSX 就是 JavaScript，一些标识符像 `class` 和 `for` 不建议作为 XML
+> 属性名。作为替代，React DOM 使用 `className` 和 `htmlFor` 来做对应的属性。
+
+## 转换（Transform）
+
+JSX 把类 XML 的语法转成原生 JavaScript，XML 元素、属性和子节点被转换成 `React.createElement` 的参数。
+
+```javascript
+var Nav;
+// 输入 (JSX):
+var app = <Nav color="blue" />;
+// 输出 (JS):
+var app = React.createElement(Nav, {color:"blue"});
+```
+
+注意，要想使用 `<Nav />`，`Nav` 变量一定要在作用区间内。
+
+JSX 也支持使用 XML 语法定义子结点：
+
+```javascript
+var Nav, Profile;
+// 输入 (JSX):
+var app = <Nav color="blue"><Profile>click</Profile></Nav>;
+// 输出 (JS):
+var app = React.createElement(
+  Nav,
+  {color:"blue"},
+  React.createElement(Profile, null, "click")
+);
+```
+
+使用 [JSX 编译器](/react/jsx-compiler.html) 来试用 JSX 并理解它是如何转换到原生 JavaScript，还有 [HTML 到 JSX 转换器](/react/html-jsx.html) 来把现有 HTML 转成 JSX。
+
+如果你要使用 JSX，这篇 [新手入门](/react/docs/getting-started.html) 教程来教你如何搭建环境。
+
+> 提示:
+>
+> JSX 表达式总是会当作 ReactElement 执行。具体的实际细节可能不同。一种优化
+> 的模式是把 ReactElement 当作一个行内的对象字面量形式来绕过
+> `React.createElement` 里的校验代码。
+
+## JavaScript 表达式
+
+### 属性表达式
+
+要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 (`{}`) 包起来，不要用引号 (`""`)。
+
+```javascript
+// 输入 (JSX):
+var person = <Person name={window.isLoggedIn ? window.name : ''} />;
+// 输出 (JS):
+var person = React.createElement(
+  Person,
+  {name: window.isLoggedIn ? window.name : ''}
+);
+```
+
+### 子节点表达式
+
+同样地，JavaScript 表达式可用于描述子结点：
+
+```javascript
+// 输入 (JSX):
+var content = <Container>{window.isLoggedIn ? <Nav /> : <Login />}</Container>;
+// 输出 (JS):
+var content = React.createElement(
+  Container,
+  null,
+  window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
+);
+```
+
+### 注释
+
+JSX 里添加注释很容易；它们只是 JS 表达式而已。你只需要在一个标签的子节点内(非最外层)小心地用 `{}` 包围要注释的部分。
+
+```javascript
+var content = (
+  <Nav>
+    {/* 一般注释, 用 {} 包围 */}
+    <Person
+      /* 多
+         行
+         注释 */
+      name={window.isLoggedIn ? window.name : ''} // 行尾注释
+    />
+  </Nav>
+);
+```
+
+> 提示:
+> 
+> JSX 类似于 HTML，但不完全一样。参考 [JSX 陷阱](/react/docs/jsx-gotchas.html) 了解主要不同。

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} />;
@@ -49,23 +49,4 @@ You can use this multiple times or combine it with other attributes. The specifi
 
 ## What's with the weird `...` notation?
 
-The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread).
-
-In fact, you can already use this in our code base as an experimental syntax:
-
-```javascript
-  var oldObj = { foo: 'hello', bar: 'world' };
-  var newObj = { ...oldObj, foo: 'hi' };
-  console.log(newObj.foo); // 'hi';
-  console.log(newObj.bar); // 'world';
-```
-
-Merging two objects can be expressed as:
-
-```javascript
-  var ab = { ...a, ...b };
-```
-
-> Note:
->
-> Use the [JSX command-line tool](http://npmjs.org/package/react-tools) with the `--harmony` flag to activate the experimental ES7 syntax.
+The `...` operator (or spread operator) is already supported for [arrays in ES6](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator). There is also an ES7 proposal for [Object Rest and Spread Properties](https://github.com/sebmarkbage/ecmascript-rest-spread). We're taking advantage of these supported and developing standards in order to provide a cleaner syntax in JSX.

docs/docs/02.2-jsx-spread.zh-CN.md

@@ -0,0 +1,52 @@
+---
+id: jsx-spread-zh-CN
+title: JSX 展开属性 （Spread Attributes）
+permalink: jsx-spread-zh-CN.html
+prev: jsx-in-depth-zh-CN.html
+next: jsx-gotchas-zh-CN.html
+---
+
+如果你事先知道模块需要的全部 Props（属性），JSX 很容易地这样写：
+
+```javascript
+  var component = <Component foo={x} bar={y} />;
+```
+
+## 修改 Props 是不好的，明白吗
+
+如果你不知道要设置哪些 Props，那么现在最好不要设置它：
+
+```javascript
+  var component = <Component />;
+  component.props.foo = x; // 不好
+  component.props.bar = y; // 同样不好
+```
+
+这样是反模式，因为 React 不能帮你检查属性类型（propTypes）。这样即使你的 属性类型有错误也不能得到清晰的错误提示。
+
+Props 应该被当作禁止修改的。修改 props 对象可能会导致预料之外的结果，所以最好不要去修改 props 对象。
+
+## 扩展属性 （Spread Attributes）
+
+现在你可以使用 JSX 的新特性 - 扩展属性：
+
+```javascript
+  var props = {};
+  props.foo = x;
+  props.bar = y;
+  var component = <Component {...props} />;
+```
+
+传入对象的属性会被复制到模块内。
+
+它能被多次使用，也可以和其它属性一起用。注意顺序很重要，后面的会覆盖掉前面的。
+
+```javascript
+  var props = { foo: 'default' };
+  var component = <Component {...props} foo={'override'} />;
+  console.log(component.props.foo); // 'override'
+```
+
+## 这个奇怪的 `...` 标记是什么？
+
+这个 `...` 操作符（也被叫做）已经被 [ES6 数组](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator) 支持。相关的还有 ES7 规范草案中的 [Object 剩余和展开属性（Rest and Spread Properties）](https://github.com/sebmarkbage/ecmascript-rest-spread)。我们利用了这些还在制定中标准中已经被支持的特性来使 JSX 拥有更优雅的语法。

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).
 
@@ -83,4 +83,4 @@ A common pattern is to create several stateless components that just render data
 
 * **Computed data:** Don't worry about precomputing values based on state — it's easier to ensure that your UI is consistent if you do all computation within `render()`. For example, if you have an array of list items in state and you want to render the count as a string, simply render `this.state.listItems.length + ' list items'` in your `render()` method rather than storing it on state.
 * **React components:** Build them in `render()` based on underlying props and state.
-* **Duplicated data from props:** Try to use props as the source of truth where possible. Because props can change over time, it's appropriate to store props in state to be able to know its previous values.
+* **Duplicated data from props:** Try to use props as the source of truth where possible. One valid use to store props in state is to be able to know it's previous values, because props can change over time.

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,8 +37,8 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
-  <FancyCheckbox checked={true} onClick={console.log}>
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
   document.body
@@ -70,8 +70,8 @@ var FancyCheckbox = React.createClass({
     );
   }
 });
-React.renderComponent(
-  <FancyCheckbox checked={true} onClick={console.log}>
+React.render(
+  <FancyCheckbox checked={true} onClick={console.log.bind(console)}>
     Hello world!
   </FancyCheckbox>,
   document.body

docs/docs/10-addons.md

@@ -11,13 +11,13 @@ next: animation.html
 - [`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.
+- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
 
 The add-ons below are in the development (unminified) version of React only:
 
-- [`PureRenderMixin`](pure-render-mixin.html), a performance booster under certain situations.
+- [`TestUtils`](test-utils.html), simple helpers for writing test cases (unminified build only).
 - [`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/10.1-animation.md

@@ -141,7 +141,7 @@ You can disable animating `enter` or `leave` animations if you want. For example
 
 ## Low-level API: `ReactTransitionGroup`
 
-`ReactTransitionGroup` is the basis for animations. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
+`ReactTransitionGroup` is the basis for animations. It is accessible as `React.addons.TransitionGroup`. When children are declaratively added or removed from it (as in the example above) special lifecycle hooks are called on them.
 
 ### `componentWillEnter(callback)`
 

docs/docs/10.4-test-utils.md

@@ -21,7 +21,7 @@ Example usage:
 ```javascript
 var node = this.refs.input.getDOMNode();
 React.addons.TestUtils.Simulate.click(node);
-React.addons.TestUtils.Simulate.change(node);
+React.addons.TestUtils.Simulate.change(node, {target: {value: 'Hello, world'}});
 React.addons.TestUtils.Simulate.keyDown(node, {key: "Enter"});
 ```
 
@@ -73,7 +73,7 @@ Returns true if `instance` is a composite component (created with `React.createC
 boolean isCompositeComponentWithType(ReactComponent instance, function componentClass)
 ```
 
-The combination of `isComponentOfType()` and `isCompositeComponent()`.
+Returns true if `instance` is a composite component (created with `React.createClass()`) whose type is of a React `componentClass`.
 
 ### isTextComponent
 

docs/docs/10.6-update.md

@@ -20,7 +20,7 @@ myData.x.y.z = 7;
 myData.a.b.push(9);
 ```
 
-you have no way of determining which data has changed since the previous copy is overriden. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
+you have no way of determining which data has changed since the previous copy is overridden. Instead, you need to create a new copy of `myData` and change only the parts of it that need to be changed. Then you can compare the old copy of `myData` with the new one in `shouldComponentUpdate()` using triple-equals:
 
 ```js
 var newData = deepCopy(myData);
@@ -58,7 +58,7 @@ The `$`-prefixed keys are called *commands*. The data structure they are "mutati
 
   * `{$push: array}` `push()` all the items in `array` on the target.
   * `{$unshift: array}` `unshift()` all the items in `array` on the target.
-  * `{$splice: array of arrays}` for each item in `array()` call `splice()` on the target with the parameters provided by the item.
+  * `{$splice: array of arrays}` for each item in `arrays` call `splice()` on the target with the parameters provided by the item.
   * `{$set: any}` replace the target entirely.
   * `{$merge: object}` merge the keys of `object` with the target.
   * `{$apply: function}` passes in the current value to the function and updates it with the new returned value.

docs/docs/getting-started.md

@@ -9,8 +9,8 @@ redirect_from: "docs/index.html"
 
 The easiest way to start hacking on React is using the following JSFiddle Hello World examples:
 
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
+ * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
+ * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
 
 ## Starter Kit
 
@@ -110,4 +110,8 @@ If you want to use React with [browserify](http://browserify.org/), [webpack](ht
 
 ## Next Steps
 
-Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. Good luck, and welcome!
+Check out [the tutorial](/react/docs/tutorial.html) and the other examples in the starter kit's `examples` directory to learn more. 
+
+We also have a wiki where the community contributes with [workflows, UI-components, routing, data management etc.](https://github.com/facebook/react/wiki/Complementary-Tools)
+
+Good luck, and welcome!

docs/docs/getting-started.zh-CN.md

@@ -8,8 +8,8 @@ next: tutorial.html
 
 开始 Hack React 的最简单的方法是用下面 JSFiddle 的Hello Worlds
 
- * **[React JSFiddle](http://jsfiddle.net/vjeux/kb3gN/)**
- * [React JSFiddle without JSX](http://jsfiddle.net/vjeux/VkebS/)
+ * **[React JSFiddle](http://jsfiddle.net/reactjs/69z2wepo/)**
+ * [React JSFiddle without JSX](http://jsfiddle.net/reactjs/5vjqabv3/)
 
 ## 入门教程包 (Starter Kit)
 

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

@@ -22,6 +22,21 @@ Create a component given a specification. A component implements a `render` meth
 For more information about the specification object, see [Component Specs and Lifecycle](/react/docs/component-specs.html).
 
 
+### React.createElement
+
+```javascript
+function createElement(
+  string/ReactComponent type,
+  [object props],
+  [children ...]
+)
+```
+
+Create and return a new ReactElement of the given type. The type argument can be either an
+html tag name string (eg. 'div', 'span', etc), or a `ReactComponent` class that was created
+with `React.createClass`.
+
+
 ### React.render
 
 ```javascript
@@ -57,10 +72,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 +83,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/ref-04-tags-and-attributes.md

@@ -56,12 +56,13 @@ accept acceptCharset accessKey action allowFullScreen allowTransparency alt
 async autoComplete autoPlay cellPadding cellSpacing charSet checked classID
 className cols colSpan content contentEditable contextMenu controls coords
 crossOrigin data dateTime defer dir disabled download draggable encType form
-formNoValidate frameBorder height hidden href hrefLang htmlFor httpEquiv icon
-id label lang list loop manifest max maxLength media mediaGroup method min
-multiple muted name noValidate open pattern placeholder poster preload
-radioGroup readOnly rel required role rows rowSpan sandbox scope scrolling
-seamless selected shape size sizes span spellCheck src srcDoc srcSet start step
-style tabIndex target title type useMap value width wmode
+formAction formEncType formMethod formNoValidate formTarget frameBorder height
+hidden href hrefLang htmlFor httpEquiv icon id label lang list loop manifest
+marginHeight marginWidth max maxLength media mediaGroup method min multiple
+muted name noValidate open pattern placeholder poster preload radioGroup
+readOnly rel required role rows rowSpan sandbox scope scrolling seamless
+selected shape size sizes span spellCheck src srcDoc srcSet start step style
+tabIndex target title type useMap value width wmode
 ```
 
 In addition, the following non-standard attributes are supported:

docs/docs/ref-05-events.md

@@ -35,7 +35,9 @@ String type
 ## Supported Events
 
 React normalizes events so that they have consistent properties across
-different browsers.
+different browsers. 
+
+The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append `Capture` to the event name; for example, instead of using `onClick`, you would use `onClickCapture` to handle the click event in the capture phase.
 
 
 ### Clipboard Events

docs/docs/ref-09-glossary.md

@@ -21,7 +21,7 @@ You can create one of these object through `React.createElement`.
 var root = React.createElement('div');
 ```
 
-To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` a long with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
+To render a new tree into the DOM, you create `ReactElement`s and pass them to `React.render` along with a regular DOM `Element` (`HTMLElement` or `SVGElement`). `ReactElement`s are not to be confused with DOM `Element`s. A `ReactElement` is a light, stateless, immutable, virtual representation of a DOM `Element`. It is a virtual DOM.
 
 ```javascript
 React.render(root, document.body);

docs/docs/thinking-in-react.md

@@ -60,7 +60,7 @@ Now that we've identified the components in our mock, let's arrange them into a
 
 ## Step 2: Build a static version in React
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/n25pd/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/yun1vgqb/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 Now that you have your component hierarchy it's time to start implementing your app. The easiest way is to build a version that takes your data model and renders the UI but has no interactivity. It's easiest to decouple these processes because building a static version requires a lot of typing and no thinking, and adding interactivity requires a lot of thinking and not a lot of typing. We'll see why.
 
@@ -104,7 +104,7 @@ So finally, our state is:
 
 ## Step 4: Identify where your state should live
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/t53sx/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/zafjbw1e/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 OK, so we've identified what the minimal set of app state is. Next we need to identify which component mutates, or *owns*, this state.
 
@@ -129,7 +129,7 @@ You can start seeing how your application will behave: set `filterText` to `"bal
 
 ## Step 5: Add inverse data flow
 
-<iframe width="100%" height="300" src="http://jsfiddle.net/F8H7p/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
+<iframe width="100%" height="300" src="http://jsfiddle.net/reactjs/n47gckhr/embedded/" allowfullscreen="allowfullscreen" frameborder="0"></iframe>
 
 So far we've built an app that renders correctly as a function of props and state flowing down the hierarchy. Now it's time to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`.
 

docs/docs/tutorial.md

@@ -16,8 +16,8 @@ We'll provide:
 It'll also have a few neat features:
 
 * **Optimistic commenting:** comments appear in the list before they're saved on the server so it feels fast.
-* **Live updates:** as other users comment we'll pop them into the comment view in real time
-* **Markdown formatting:** users can use Markdown to format their text
+* **Live updates:** other users' comments are popped into the comment view in real time.
+* **Markdown formatting:** users can use Markdown to format their text.
 
 ### Want to skip all this and just see the source?
 
@@ -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 -->
@@ -141,7 +141,7 @@ var CommentForm = React.createClass({
 });
 ```
 
-Next, update the `CommentBox` component to use its new friends:
+Next, update the `CommentBox` component to use these new components:
 
 ```javascript{6-8}
 // tutorial3.js

docs/docs/videos.md

@@ -96,6 +96,11 @@ A [tagtree.tv](http://tagtree.tv/) video conveying the principles of [Thinking i
 
 By [Tom Occhino](http://tomocchino.com/) and [Jordan Walke](https://github.com/jordwalke)
 
+### Backbone + React + Middleman Screencast
+<iframe width="650" height="315" src="//www.youtube.com/embed/iul1fWHVU6A" frameborder="0" allowfullscreen></iframe>
+
+Backbone is a great way in interface a REST API with React. This screencast shows how to integate the two using [Backbone-React-Component](https://github.com/magalhas/backbone-react-component). Middleman is the framework used in this example but could easily be replaced with other frameworks. A supported template of this can be found [here](https://github.com/jbhatab/middleman-backbone-react-template). -- [Open Minded Innovations](http://www.openmindedinnovations.com/)
+
 ### Developing User Interfaces With React - Super VanJS
 
 <iframe width="650" height="315" src="//www.youtube.com/embed/1OeXsL5mr4g" frameborder="0" allowfullscreen></iframe>
@@ -127,3 +132,11 @@ by [Stoyan Stefanov](http://www.phpied.com/)
 <iframe width="650" height="315" src="//www.youtube.com/embed/i__969noyAM" frameborder="0" allowfullscreen></iframe>
 
 Facebook engineers [Bill Fisher](http://twitter.com/fisherwebdev) and [Jing Chen](http://twitter.com/jingc) talk about Flux and React, and how using an application architecture with a unidirectional data flow cleans up a lot of their code.
+
+### Server-Side Rendering of Isomorphic Apps at SoundCloud
+
+<iframe src="//player.vimeo.com/video/108488724" width="500" height="281" frameborder="0" allowfullscreen></iframe>
+
+Walk-through by [Andres Suarez](https://github.com/zertosh) on how [SoundCloud](https://developers.soundcloud.com/blog/) is using React and Flux for server-side rendering.
+
+[Slides and sample code](https://github.com/zertosh/ssr-demo-kit)

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:

docs/tips/06-style-props-value-px.md

@@ -29,6 +29,7 @@ Sometimes you _do_ want to keep the CSS properties unitless. Here's a list of pr
 - `opacity`
 - `order`
 - `orphans`
+- `strokeOpacity`
 - `widows`
 - `zIndex`
 - `zoom`

examples/basic-commonjs/package.json

@@ -3,10 +3,10 @@
   "description": "Basic example of using React with CommonJS",
   "main": "index.js",
   "devDependencies": {
-    "envify": "~1.2.1",
-    "react": "~0.10.0",
-    "reactify": "~0.13.1",
-    "browserify": "~3.44.2"
+    "browserify": "^6.3.3",
+    "envify": "^3.2.0",
+    "react": "^0.12.0",
+    "reactify": "^0.17.1"
   },
   "scripts": {
     "build": "browserify --debug --transform reactify index.js > bundle.js"

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.2",
   "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.2",
   "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.2';
 
 module.exports = React;

src/browser/ui/dom/CSSProperty.js

@@ -16,7 +16,6 @@
  */
 var isUnitlessNumber = {
   columnCount: true,
-  fillOpacity: true,
   flex: true,
   flexGrow: true,
   flexShrink: true,
@@ -28,7 +27,11 @@ var isUnitlessNumber = {
   orphans: true,
   widows: true,
   zIndex: true,
-  zoom: true
+  zoom: true,
+
+  // SVG-related properties
+  fillOpacity: true,
+  strokeOpacity: true
 };
 
 /**

src/browser/ui/dom/HTMLDOMPropertyConfig.js

@@ -88,7 +88,11 @@ var HTMLDOMPropertyConfig = {
     draggable: null,
     encType: null,
     form: MUST_USE_ATTRIBUTE,
+    formAction: MUST_USE_ATTRIBUTE,
+    formEncType: MUST_USE_ATTRIBUTE,
+    formMethod: MUST_USE_ATTRIBUTE,
     formNoValidate: HAS_BOOLEAN_VALUE,
+    formTarget: MUST_USE_ATTRIBUTE,
     frameBorder: MUST_USE_ATTRIBUTE,
     height: MUST_USE_ATTRIBUTE,
     hidden: MUST_USE_ATTRIBUTE | HAS_BOOLEAN_VALUE,
@@ -103,6 +107,8 @@ var HTMLDOMPropertyConfig = {
     list: MUST_USE_ATTRIBUTE,
     loop: MUST_USE_PROPERTY | HAS_BOOLEAN_VALUE,
     manifest: MUST_USE_ATTRIBUTE,
+    marginHeight: null,
+    marginWidth: null,
     max: null,
     maxLength: MUST_USE_ATTRIBUTE,
     media: MUST_USE_ATTRIBUTE,

src/core/ReactElement.js

@@ -174,7 +174,7 @@ ReactElement.createElement = function(type, config, children) {
   }
 
   // Resolve default props
-  if (type.defaultProps) {
+  if (type && type.defaultProps) {
     var defaultProps = type.defaultProps;
     for (propName in defaultProps) {
       if (typeof props[propName] === 'undefined') {

src/core/ReactElementValidator.js

@@ -23,6 +23,7 @@ var ReactPropTypeLocations = require('ReactPropTypeLocations');
 var ReactCurrentOwner = require('ReactCurrentOwner');
 
 var monitorCodeUse = require('monitorCodeUse');
+var warning = require('warning');
 
 /**
  * Warn if there's no key explicitly set on dynamic arrays of children or
@@ -220,6 +221,15 @@ function checkPropTypes(componentName, propTypes, props, location) {
 var ReactElementValidator = {
 
   createElement: function(type, props, children) {
+    // We warn in this case but don't throw. We expect the element creation to
+    // succeed and there will likely be errors in render.
+    warning(
+      type != null,
+      'React.createElement: type should not be null or undefined. It should ' +
+        'be a string (for DOM elements) or a ReactClass (for composite ' +
+        'components).'
+    );
+
     var element = ReactElement.createElement.apply(this, arguments);
 
     // The result can be nullish if a mock or a custom function is used.
@@ -232,22 +242,24 @@ var ReactElementValidator = {
       validateChildKeys(arguments[i], type);
     }
 
-    var name = type.displayName;
-    if (type.propTypes) {
-      checkPropTypes(
-        name,
-        type.propTypes,
-        element.props,
-        ReactPropTypeLocations.prop
-      );
-    }
-    if (type.contextTypes) {
-      checkPropTypes(
-        name,
-        type.contextTypes,
-        element._context,
-        ReactPropTypeLocations.context
-      );
+    if (type) {
+      var name = type.displayName;
+      if (type.propTypes) {
+        checkPropTypes(
+          name,
+          type.propTypes,
+          element.props,
+          ReactPropTypeLocations.prop
+        );
+      }
+      if (type.contextTypes) {
+        checkPropTypes(
+          name,
+          type.contextTypes,
+          element._context,
+          ReactPropTypeLocations.context
+        );
+      }
     }
     return element;
   },

src/core/ReactNativeComponent.js

@@ -63,7 +63,7 @@ function createInstanceForTag(tag, props, parentType) {
 
 var ReactNativeComponent = {
   createInstanceForTag: createInstanceForTag,
-  injection: ReactNativeComponentInjection,
+  injection: ReactNativeComponentInjection
 };
 
 module.exports = ReactNativeComponent;

src/core/__tests__/ReactCompositeComponent-test.js

@@ -1483,4 +1483,25 @@ describe('ReactCompositeComponent', function() {
     );
   });
 
+  it('gives a helpful error when passing null or undefined', function() {
+    spyOn(console, 'warn');
+    React.createElement(undefined);
+    React.createElement(null);
+    expect(console.warn.calls.length).toBe(2);
+    expect(console.warn.calls[0].args[0]).toBe(
+      'Warning: React.createElement: type should not be null or undefined. ' +
+      'It should be a string (for DOM elements) or a ReactClass (for ' +
+      'composite components).'
+    );
+    expect(console.warn.calls[1].args[0]).toBe(
+      'Warning: React.createElement: type should not be null or undefined. ' +
+      'It should be a string (for DOM elements) or a ReactClass (for ' +
+      'composite components).'
+    );
+    React.createElement('div');
+    expect(console.warn.calls.length).toBe(2);
+
+    expect(() => React.createElement(undefined)).not.toThrow()
+  });
+
 });

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/__tests__/react-displayName-test.js

@@ -24,7 +24,7 @@ describe('react displayName jsx', function() {
     var code = [
       '"use strict";',
       'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
+      '  displayName: "Whateva",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -34,7 +34,7 @@ describe('react displayName jsx', function() {
     var result = [
       '"use strict";',
       'var Whateva = React.createClass({',
-      '  displayName: \'Whateva\',',
+      '  displayName: "Whateva",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -54,7 +54,7 @@ describe('react displayName jsx', function() {
     ].join('\n');
 
     var result = [
-      'var Component = React.createClass({displayName: \'Component\',',
+      'var Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -76,7 +76,7 @@ describe('react displayName jsx', function() {
 
     var result = [
       'var Component;',
-      'Component = React.createClass({displayName: \'Component\',',
+      'Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -96,7 +96,7 @@ describe('react displayName jsx', function() {
     ].join('\n');
 
     var result = [
-      'exports.Component = React.createClass({displayName: \'Component\',',
+      'exports.Component = React.createClass({displayName: "Component",',
       '  render: function() {',
       '    return null;',
       '  }',
@@ -119,7 +119,7 @@ describe('react displayName jsx', function() {
 
     var result = [
       'exports = {',
-      '  Component: React.createClass({displayName: \'Component\',',
+      '  Component: React.createClass({displayName: "Component",',
       '    render: function() {',
       '      return null;',
       '    }',

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) {
@@ -33,7 +33,7 @@ function addDisplayName(displayName, object, state) {
 
     if (safe) {
       utils.catchup(object['arguments'][0].range[0] + 1, state);
-      utils.append("displayName: '" + displayName + "',", state);
+      utils.append('displayName: "' + displayName + '",', 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 = {
@@ -231,7 +231,7 @@ function renderXJSExpressionContainer(traverse, object, isLast, path, state) {
 function quoteAttrName(attr) {
   // Quote invalid JS identifiers.
   if (!/^[a-z_$][a-z\d_$]*$/i.test(attr)) {
-    return "'" + attr + "'";
+    return '"' + attr + '"';
   }
   return attr;
 }

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',