v0.14.2

Add package.json for react-haste package
(cherry picked from commit 72a11421d2)

CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.14.2 (November 2, 2015)
+
+### React DOM
+- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
+- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
+- Added support for `integrity` attribute
+- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior
+- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages
+
+
 ## 0.14.1 (October 28, 2015)
 
 ### React DOM

README.md

@@ -37,12 +37,12 @@ The fastest way to get started is to serve JavaScript from the CDN (also availab
 
 ```html
 <!-- The core React library -->
-<script src="https://fb.me/react-0.14.1.js"></script>
+<script src="https://fb.me/react-0.14.2.js"></script>
 <!-- The ReactDOM Library -->
-<script src="https://fb.me/react-dom-0.14.1.js"></script>
+<script src="https://fb.me/react-dom-0.14.2.js"></script>
 ```
 
-We've also built a [starter kit](https://facebook.github.io/react/downloads/react-0.14.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](https://facebook.github.io/react/downloads/react-0.14.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

@@ -36,4 +36,4 @@ sass:
   sass_dir: _css
 gems:
 - jekyll-redirect-from
-react_version: 0.14.0
+react_version: 0.14.1

docs/_posts/2015-03-19-building-the-facebook-news-feed-with-relay.md

@@ -40,20 +40,18 @@ The first step is a React `<Story>` component that accepts a `story` prop with t
 
 ```javascript
 // Story.react.js
-class Story extends React.Component {
+export default class Story extends React.Component {
   render() {
     var story = this.props.story;
     return (
       <View>
-        <Image uri={story.author.profile_picture.uri} />
+        <Image uri={story.author.profilePicture.uri} />
         <Text>{story.author.name}</Text>
         <Text>{story.text}</Text>
       </View>
     );
   }
 }
-
-module.exports = Story;
 ```
 
 <br/>
@@ -66,41 +64,41 @@ Relay automates the process of fetching data for components by wrapping existing
 // Story.react.js
 class Story extends React.Component { ... }
 
-module.exports = Relay.createContainer(Story, {
-  queries: {
+export default Relay.createContainer(Story, {
+  fragments: {
     story: /* TODO */
   }
 });
 ```
 
-Before adding the GraphQL query, let's look at the component hierarchy this creates:
+Before adding the GraphQL fragment, let's look at the component hierarchy this creates:
 
 <img src="/react/img/blog/relay-components/relay-containers.png" width="397" alt="React Container Data Flow" />
 
-Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a query is defined. In this case we'll add a GraphQL query for `story`:
+Most props will be passed through from the container to the original component. However, Relay will return the query results for a prop whenever a fragment is defined. In this case we'll add a GraphQL fragment for `story`:
 
 ```javascript
 // Story.react.js
 class Story extends React.Component { ... }
 
-module.exports = Relay.createContainer(Story, {
-  queries: {
-    story: graphql`
-      Story {
+export default Relay.createContainer(Story, {
+  fragments: {
+    story: () => Relay.QL`
+      fragment on Story {
         author {
-          name,
-          profile_picture {
+          name
+          profilePicture {
             uri
           }
-        },
+        }
         text
       }
-    `
-  }
+    `,
+  },
 });
 ```
 
-Queries use ES6 template literals tagged with the `graphql` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe queries. Note that the query's structure closely matches the object structure that we expected in `<Story>`'s render function.
+Queries use ES6 template literals tagged with the `Relay.QL` function. Similar to how JSX transpiles to plain JavaScript objects and function calls, these template literals transpile to plain objects that describe fragments. Note that the fragment's structure closely matches the object structure that we expected in `<Story>`'s render function.
 
 <br/>
 
@@ -112,7 +110,7 @@ We can render a Relay component by providing Relay with the component (`<Story>`
 {
   author: {
     name: "Greg",
-    profile_picture: {
+    profilePicture: {
       uri: "https://…"
     }
   },
@@ -159,35 +157,35 @@ module.exports = NewsFeed;
 
 `<NewsFeed>` has two new requirements: it composes `<Story>` and requests more data at runtime.
 
-Just as React views can be nested, Relay queries can compose queries from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getQuery('prop')}`. Pagination can be accomplished with a query parameter, specified with `<param>` (as in `stories(first: <count>)`):
+Just as React views can be nested, Relay components can compose query fragments from child components. Composition in GraphQL uses ES6 template literal substitution: `${Component.getFragment('prop')}`. Pagination can be accomplished with a variable, specified with `$variable` (as in `stories(first: $count)`):
 
 ```javascript
 // NewsFeed.react.js
 class NewsFeed extends React.Component { ... }
 
-module.exports = Relay.createContainer(NewsFeed, {
-  queryParams: {
-    count: 3                             /* default to 3 stories */
+export default Relay.createContainer(NewsFeed, {
+  initialVariables: {
+    count: 3                                /* default to 3 stories */
   },
-  queries: {
-    viewer: graphql`
-      Viewer {
-        stories(first: <count>) {        /* fetch viewer's stories */
-          edges {                        /* traverse the graph */
+  fragments: {
+    viewer: () => Relay.QL`
+      fragment on Viewer {
+        stories(first: $count) {            /* fetch viewer's stories */
+          edges {                           /* traverse the graph */
             node {
-              ${Story.getQuery('story')} /* compose child query */
+              ${Story.getFragment('story')} /* compose child fragment */
             }
           }
         }
       }
-    `
-  }
+    `,
+  },
 });
 ```
 
-Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed queries and fetch them in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
+Whenever `<NewsFeed>` is rendered, Relay will recursively expand all the composed fragments and fetch the queries in a single trip to the server. In this case, the `text` and `author` data will be fetched for each of the 3 story nodes.
 
-Query parameters are available to components as `props.queryParams` and can be modified with `props.setQueryParams(nextParams)`. We can use these to implement pagination:
+Query variables are available to components as `props.relay.variables` and can be modified with `props.relay.setVariables(nextVariables)`. We can use these to implement pagination:
 
 ```javascript
 // NewsFeed.react.js
@@ -196,16 +194,16 @@ class NewsFeed extends React.Component {
 
   loadMore() {
     // read current params
-    var count = this.props.queryParams.count;
+    var count = this.props.relay.variables.count;
     // update params
-    this.props.setQueryParams({
-      count: count + 5
+    this.props.relay.setVariables({
+      count: count + 5,
     });
   }
 }
 ```
 
-Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.queryParams.count`.
+Now when `loadMore()` is called, Relay will send a GraphQL request for the additional five stories. When these stories are fetched, the component will re-render with the new stories available in `props.viewer.stories` and the updated count reflected in `props.relay.variables.count`.
 
 <br/>
 

docs/_posts/2015-11-02-react-v0.14.2.md

@@ -0,0 +1,31 @@
+---
+title: "React v0.14.2"
+author: zpao
+---
+
+We have a quick update following the release of 0.14.1 last week. It turns out we broke a couple things in the development build of React when using Internet Explorer. Luckily it was only the development build, so your production applications were unaffected. This release is mostly to address those issues. There is one notable change if consuming React from npm. For the `react-dom` package, we moved `react` from a regular dependency to a peer dependency. This will impact very few people as these two are typically installed together at the top level, but it will fix some issues with dependencies of installed components also using `react` as a peer dependency.
+
+The release is now available for download:
+
+* **React**  
+  Dev build with warnings: <https://fb.me/react-0.14.2.js>  
+  Minified build for production: <https://fb.me/react-0.14.2.min.js>  
+* **React with Add-Ons**  
+  Dev build with warnings: <https://fb.me/react-with-addons-0.14.2.js>  
+  Minified build for production: <https://fb.me/react-with-addons-0.14.2.min.js>  
+* **React DOM** (include React in the page before React DOM)  
+  Dev build with warnings: <https://fb.me/react-dom-0.14.2.js>  
+  Minified build for production: <https://fb.me/react-dom-0.14.2.min.js>  
+
+We've also published version `0.14.2` of the `react`, `react-dom`, and addons packages on npm and the `react` package on bower.
+
+- - -
+
+## Changelog
+
+### React DOM
+- Fixed bug with development build preventing events from firing in some versions of Internet Explorer & Edge
+- Fixed bug with development build when using es5-sham in older versions of Internet Explorer
+- Added support for `integrity` attribute
+- Fixed bug resulting in `children` prop being coerced to a string for custom elements, which was not the desired behavior.
+- Moved `react` from `dependencies` to `peerDependencies` to match expectations and align with `react-addons-*` packages

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

@@ -22,7 +22,7 @@ It doesn't alter the semantics of JavaScript.
 
 React can either render HTML tags (strings) or React components (classes).
 
-To render a HTML tag, just use lower-case tag names in JSX:
+To render an HTML tag, just use lower-case tag names in JSX:
 
 ```javascript
 var myDivElement = <div className="foo" />;

docs/docs/09-tooling-integration.md

@@ -30,10 +30,14 @@ If you like using JSX, Babel provides an [in-browser ES6 and JSX transformer for
 
 ### Productionizing: Precompiled JSX
 
-If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel`. Babel has built-in support for React v0.12 and v0.13. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all React.createClass calls.
+If you have [npm](https://www.npmjs.com/), you can run `npm install -g babel`. Babel has built-in support for React v0.12+. Tags are automatically transformed to their equivalent `React.createElement(...)`, `displayName` is automatically inferred and added to all React.createClass calls.
 
 This tool will translate files that use JSX syntax to plain JavaScript files that can run directly in the browser. It will also watch directories for you and automatically transform files when they are changed; for example: `babel --watch src/ --out-dir lib/`.
 
+> Note:
+>
+> If you are using babel 6.x, you will need to install the relevant preset/plugins. To get started, you can run `npm install -g babel babel-preset-react` and then run `babel --presets react --watch src/ --out-dir lib/`. For more information: check out the [babel 6 blog post](http://babeljs.io/blog/2015/10/29/6.0.0/)
+
 By default JSX files with a `.js` extension are transformed. Run `babel --help` for more information on how to use Babel.
 
 Example output:

docs/docs/getting-started.ko-KR.md

@@ -13,13 +13,37 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
  * **[React JSFiddle](https://jsfiddle.net/reactjs/69z2wepo/)**
  * [React JSFiddle without JSX](https://jsfiddle.net/reactjs/5vjqabv3/)
 
-## 초심자용 키트
+## npm으로 React 사용하기
 
-초심자용 키트를 내려받아 시작합니다.
+React는 CommonJS 모듈과 유사한 시스템인 [browserify](http://browserify.org/) 또는 [webpack](https://webpack.github.io/)를 사용하기를 추천합니다.
+[`react`](https://www.npmjs.com/package/react) 와 [`react-dom`](https://www.npmjs.com/package/react-dom) npm
+패키지를 이용합니다.
+
+```js
+// main.js
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+ReactDOM.render(
+  <h1>Hello, world!</h1>,
+  document.getElementById('example')
+);
+```
+
+browserify를 설치한 후에 React DOM을 설치하고 bundle을 빌드합니다.
+
+```sh
+$ npm install --save react react-dom
+$ browserify -t babelify main.js -o bundle.js
+```
+
+## npm 없이 Quick Start 하기
+
+만약 당신이 npm을 사용할 준비가 아직 안되었다면, 미리빌드된 React와 React DOM 파일이 포함된 초심자용 키트를 다운로드 받을 수 있습니다.
 
 <div class="buttons-unit downloads">
   <a href="/react/downloads/react-{{site.react_version}}.zip" class="button">
-    초심자용 키트 내려받기 {{site.react_version}}
+    Download Starter Kit {{site.react_version}}
   </a>
 </div>
 
@@ -32,6 +56,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
+    <script src="build/react-dom.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
   </head>
   <body>
@@ -46,7 +71,7 @@ React를 시작하는 가장 빠른 방법은 다음의 Hello World JSFiddle 예
 </html>
 ```
 
-JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. 일반적인 JavaScript로 번역하기 위해 `<script type="text/jsx">`를 사용하고 `JSXTransformer.js`를 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
+JavaScript 안에 보이는 XML 구문은 JSX라고 합니다; 더 자세한 내용은 [JSX syntax](/react/docs/jsx-in-depth-ko-KR.html)을 확인하세요. vanilla JavaScript로 번역하기 위해 `<script type="text/babel">`를 사용하고 Babel을 포함하는 것으로 실제로 브라우저에서 변환작업을 수행합니다.
 
 ### 파일의 분리
 
@@ -69,19 +94,20 @@ ReactDOM.render(
 
 ### 오프라인 변환
 
-먼저 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
+먼저 [Babel](http://babeljs.io/) 커맨드라인 도구를 설치합니다. ([npm](https://www.npmjs.com/) 필요):
 
 ```
-npm install -g react-tools
+npm install --global babel
 ```
 
 그다음, `src/helloworld.js` 파일을 일반 JavaScript 파일로 변환합니다:
 
 ```
-jsx --watch src/ build/
+babel src --watch --out-dir build
+
 ```
 
-수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다.
+수정할 때마다 `build/helloworld.js` 파일이 자동생성됩니다. 더 깊이 사용하고 싶으면 [Babel CLI documentation](http://babeljs.io/docs/usage/cli/)를 읽어보세요.
 
 ```javascript{2}
 ReactDOM.render(
@@ -92,14 +118,15 @@ ReactDOM.render(
 
 아래의 내용대로 HTML 파일을 업데이트합니다:
 
-```html{7,11}
+```html{8,12}
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="UTF-8" />
     <title>Hello React!</title>
     <script src="build/react.js"></script>
-    <!-- Babel는 이제 불필요합니다! -->
+    <script src="build/react-dom.js"></script>
+    <!-- No need for Babel! -->
   </head>
   <body>
     <div id="example"></div>
@@ -108,10 +135,6 @@ ReactDOM.render(
 </html>
 ```
 
-## CommonJS를 원하시나요?
-
-만약 React를 [browserify](http://browserify.org/), [webpack](https://webpack.github.io/)이나 기타 CommonJS와 호환되는 모듈시스템과 함께 사용하고 싶다면, [`react` npm 패키지](https://www.npmjs.com/package/react)를 사용하세요. 그 외에도 `jsx` 빌드툴은 아주 쉽게 CommonJS 외에도 대부분의 패키징 시스템에 통합될 수 있습니다.
-
 ## 다음 단계로
 
 더 알아보려면 [튜토리얼](/react/docs/tutorial-ko-KR.html)과 초심자용 키트의 `examples` 디렉터리에서 다른 예제들을 확인해 보세요.

docs/js/react-dom.js

@@ -1,5 +1,5 @@
 /**
- * ReactDOM v0.14.0
+ * ReactDOM v0.14.1
  *
  * Copyright 2013-2015, Facebook, Inc.
  * All rights reserved.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-build",
   "private": true,
-  "version": "0.14.1",
+  "version": "0.14.2",
   "devDependencies": {
     "babel": "^5.8.3",
     "babel-eslint": "^4.1.3",

packages/react-addons/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-addons",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "main": "index.js",
   "license": "BSD-3-Clause",
   "peerDependencies": {
-    "react": "^0.14.1"
+    "react": "^0.14.2"
   }
 }

packages/react-dom/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dom",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "React package for working with the DOM.",
   "main": "index.js",
   "repository": {
@@ -15,7 +15,7 @@
     "url": "https://github.com/facebook/react/issues"
   },
   "homepage": "https://github.com/facebook/react/tree/master/npm-react-dom",
-  "dependencies": {
-    "react": "^0.14.1"
+  "peerDependencies": {
+    "react": "^0.14.2"
   }
 }

packages/react/package.json

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

src/ReactVersion.js

@@ -11,4 +11,4 @@
 
 'use strict';
 
-module.exports = '0.14.1';
+module.exports = '0.14.2';

src/package.json

@@ -1,6 +1,5 @@
 {
-  "name": "react",
-  "jstest": {
-    "useAutoMock": false
-  }
+  "name": "react-haste",
+  "version": "0.14.2",
+  "license": "BSD-3-Clause"
 }

src/renderers/dom/shared/HTMLDOMPropertyConfig.js

@@ -105,6 +105,7 @@ var HTMLDOMPropertyConfig = {
     icon: null,
     id: MUST_USE_PROPERTY,
     inputMode: MUST_USE_ATTRIBUTE,
+    integrity: null,
     is: MUST_USE_ATTRIBUTE,
     keyParams: MUST_USE_ATTRIBUTE,
     keyType: MUST_USE_ATTRIBUTE,

src/renderers/dom/shared/ReactDOMComponent.js

@@ -51,6 +51,7 @@ var registrationNameModules = ReactBrowserEventEmitter.registrationNameModules;
 // For quickly matching children type, to test if can be treated as content.
 var CONTENT_TYPES = {'string': true, 'number': true};
 
+var CHILDREN = keyOf({children: null});
 var STYLE = keyOf({style: null});
 var HTML = keyOf({__html: null});
 
@@ -675,7 +676,9 @@ ReactDOMComponent.Mixin = {
         }
         var markup = null;
         if (this._tag != null && isCustomComponent(this._tag, props)) {
-          markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
+          if (propKey !== CHILDREN) {
+            markup = DOMPropertyOperations.createMarkupForCustomAttribute(propKey, propValue);
+          }
         } else {
           markup = DOMPropertyOperations.createMarkupForProperty(propKey, propValue);
         }
@@ -962,6 +965,9 @@ ReactDOMComponent.Mixin = {
         if (!node) {
           node = ReactMount.getNode(this._rootNodeID);
         }
+        if (propKey === CHILDREN) {
+          nextProp = null;
+        }
         DOMPropertyOperations.setValueForAttribute(
           node,
           propKey,

src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js

@@ -198,6 +198,18 @@ describe('ReactDOMComponent', function() {
       expect(stubStyle.display).toEqual('');
     });
 
+    it('should skip child object attribute on web components', function() {
+      var container = document.createElement('div');
+
+      // Test intial render to null
+      ReactDOM.render(<my-component children={['foo']} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+
+      // Test updates to null
+      ReactDOM.render(<my-component children={['foo']} />, container);
+      expect(container.firstChild.hasAttribute('children')).toBe(false);
+    });
+
     it('should remove attributes', function() {
       var container = document.createElement('div');
       ReactDOM.render(<img height="17" />, container);

src/shared/utils/ReactErrorUtils.js

@@ -67,11 +67,12 @@ if (__DEV__) {
     var fakeNode = document.createElement('react');
     ReactErrorUtils.invokeGuardedCallback = function(name, func, a, b) {
       var boundFunc = func.bind(null, a, b);
-      fakeNode.addEventListener(name, boundFunc, false);
+      var evtType = `react-${name}`;
+      fakeNode.addEventListener(evtType, boundFunc, false);
       var evt = document.createEvent('Event');
-      evt.initEvent(name, false, false);
+      evt.initEvent(evtType, false, false);
       fakeNode.dispatchEvent(evt);
-      fakeNode.removeEventListener(name, boundFunc, false);
+      fakeNode.removeEventListener(evtType, boundFunc, false);
     };
   }
 }

src/shared/utils/canDefineProperty.js

@@ -14,7 +14,7 @@
 var canDefineProperty = false;
 if (__DEV__) {
   try {
-    Object.defineProperty({}, 'x', {});
+    Object.defineProperty({}, 'x', {get: function() {}});
     canDefineProperty = true;
   } catch (x) {
     // IE will fail on defineProperty