16 beta 5 version bump and results JSON

Enable new fiber ReactTestRenderer API methods

.babelrc

@@ -4,7 +4,7 @@
   "plugins": [
     "transform-class-properties",
     "syntax-trailing-function-commas",
-    "transform-object-rest-spread",
+    ["transform-object-rest-spread", { "useBuiltIns": true }],
     "transform-es2015-template-literals",
     "transform-es2015-literals",
     "transform-es2015-arrow-functions",

.flowconfig

@@ -24,6 +24,7 @@ module.system=haste
 
 esproposal.class_static_fields=enable
 esproposal.class_instance_fields=enable
+unsafe.enable_getters_and_setters=true
 
 munge_underscores=false
 

docs/_posts/2016-07-11-introducing-reacts-error-code-system.md

@@ -9,7 +9,7 @@ Prior to this release, we stripped out error messages at build-time and this is
 
 > Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.
 
-In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/dev-expression-with-codes.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
+In order to make debugging in production easier, we're introducing an Error Code System in [15.2.0](https://github.com/facebook/react/releases/tag/v15.2.0). We developed a [gulp script](https://github.com/facebook/react/blob/master/scripts/error-codes/gulp-extract-errors.js) that collects all of our `invariant` error messages and folds them to a [JSON file](https://github.com/facebook/react/blob/master/scripts/error-codes/codes.json), and at build-time Babel uses the JSON to [rewrite](https://github.com/facebook/react/blob/master/scripts/error-codes/replace-invariant-error-codes.js) our `invariant` calls in production to reference the corresponding error IDs. Now when things go wrong in production, the error that React throws will contain a URL with an error ID and relevant information. The URL will point you to a page in our documentation where the original error message gets reassembled.
 
 While we hope you don't see errors often, you can see how it works [here](/react/docs/error-decoder.html?invariant=109&args[]=Foo). This is what the same error from above will look like:
 

docs/_posts/2017-07-26-error-handling-in-react-16.md

@@ -0,0 +1,114 @@
+---
+title: "Error Handling in React 16"
+author: gaearon
+---
+
+As React 16 release is getting closer, we would like to announce a few changes to how React handles JavaScript errors inside components. These changes are included in React 16 beta versions, and will be a part of React 16.
+
+**By the way, [we just released the first beta of React 16 for you to try!](https://github.com/facebook/react/issues/10294)**
+
+## Behavior in React 15 and Earlier
+
+In the past, JavaScript errors inside components used to corrupt React’s internal state and cause it to [emit](https://github.com/facebook/react/issues/4026) [cryptic](https://github.com/facebook/react/issues/6895) [errors](https://github.com/facebook/react/issues/8579) on next renders. These errors were always caused by an earlier error in the application code, but React did not provide a way to handle them gracefully in components, and could not recover from them.
+
+## Introducing Error Boundaries
+
+A JavaScript error in a part of the UI shouldn’t break the whole app. To solve this problem for React users, React 16 introduces a new concept of an “error boundary”.
+
+Error boundaries are React components that **catch JavaScript errors anywhere in their child component tree, log those errors, and display a fallback UI** instead of the component tree that crashed. Error boundaries catch errors during rendering, in lifecycle methods, and in constructors of the whole tree below them.
+
+A class component becomes an error boundary if it defines a new lifecycle method called `componentDidCatch(error, info)`:
+
+```js{7-12,15-18}
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  componentDidCatch(error, info) {
+    // Display fallback UI
+    this.setState({ hasError: true });
+    // You can also log the error to an error reporting service
+    logErrorToMyService(error, info);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      // You can render any custom fallback UI
+      return <h1>Something went wrong.</h1>;
+    }
+    return this.props.children;
+  }
+}
+```
+
+Then you can use it as a regular component:
+
+```js
+<ErrorBoundary>
+  <MyWidget />
+</ErrorBoundary>
+```
+
+The `componentDidCatch()` method works like a JavaScript `catch {}` block, but for components. Only class components can be error boundaries. In practice, most of the time you’ll want to declare an error boundary component once and use it throughout your application.
+
+Note that **error boundaries only catch errors in the components below them in the tree**. An error boundary can’t catch an error within itself. If an error boundary fails trying to render the error message, the error will propagate to the closest error boundary above it. This, too, is similar to how `catch {}` block works in JavaScript.
+
+## Live Demo
+
+Check out [this example of declaring and using an error boundary](https://codepen.io/gaearon/pen/wqvxGa?editors=0010) with [React 16 beta](https://github.com/facebook/react/issues/10294).
+
+## Where to Place Error Boundaries
+
+The granularity of error boundaries is up to you. You may wrap top-level route components to display a “Something went wrong” message to the user, just like server-side frameworks often handle crashes. You may also wrap individual widgets in an error boundary to protect them from crashing the rest of the application.
+
+## New Behavior for Uncaught Errors
+
+This change has an important implication. **As of React 16, errors that were not caught by any error boundary will result in unmounting of the whole React component tree.**
+
+We debated this decision, but in our experience it is worse to leave corrupted UI in place than to completely remove it. For example, in a product like Messenger leaving the broken UI visible could lead to somebody sending a message to the wrong person. Similarly, it is worse for a payments app to display a wrong amount than to render nothing.
+
+This change means that as you migrate to React 16, you will likely uncover existing crashes in your application that have been unnoticed before. Adding error boundaries lets you provide better user experience when something goes wrong.
+
+For example, Facebook Messenger wraps content of the sidebar, the info panel, the conversation log, and the message input into separate error boundaries. If some component in one of these UI areas crashes, the rest of them remain interactive.
+
+We also encourage you to use JS error reporting services (or build your own) so that you can learn about unhandled exceptions as they happen in production, and fix them.
+
+## Component Stack Traces
+
+React 16 prints all errors that occurred during rendering to the console in development, even if the application accidentally swallows them. In addition to the error message and the JavaScript stack, it also provides component stack traces. Now you can see where exactly in the component tree the failure has happened:
+
+<img src="/react/img/blog/error-boundaries-stack-trace.png" alt="Component stack traces in error message" style="width: 100%;">
+
+You can also see the filenames and line numbers in the component stack trace. This works by default in [Create React App](https://github.com/facebookincubator/create-react-app) projects:
+
+<img src="/react/img/blog/error-boundaries-stack-trace-line-numbers.png" alt="Component stack traces with line numbers in error message" style="width: 100%;">
+
+If you don’t use Create React App, you can add [this plugin](https://www.npmjs.com/package/babel-plugin-transform-react-jsx-source) manually to your Babel configuration. Note that it’s intended only for development and **must be disabled in production**.
+
+## Why Not Use `try` / `catch`?
+
+`try` / `catch` is great but it only works for imperative code:
+
+```js
+try {
+  showButton();
+} catch (error) {
+  // ...
+}
+```
+
+However, React components are declarative and specify *what* should be rendered:
+
+```js
+<Button />
+```
+
+Error boundaries preserve the declarative nature of React, and behave as you would expect. For example, even if an error occurs in a `componentDidUpdate` hook caused by a `setState` somewhere deep in the tree, it will still correctly propagate to the closest error boundary.
+
+## Naming Changes from React 15
+
+React 15 included a very limited support for error boundaries under a different method name: `unstable_handleError`. This method no longer works, and you will need to change it to `componentDidCatch` in your code starting from the first 16 beta release.
+
+For this change, we’ve provided [a codemod](https://github.com/reactjs/react-codemod#error-boundaries) to automatically migrate your code.

docs/docs/installation.md

@@ -218,21 +218,35 @@ Learn [how to tell if your website is serving the right version of React](/react
 If you don't want to use npm to manage client packages, the `react` and `react-dom` npm packages also provide single-file distributions in `dist` folders, which are hosted on a CDN:
 
 ```html
-<script src="https://unpkg.com/react@15/dist/react.js"></script>
-<script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
+<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
 ```
 
 The versions above are only meant for development, and are not suitable for production. Minified and optimized production versions of React are available at:
 
 ```html
-<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
-<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
+<script crossorigin src="https://unpkg.com/react@15/dist/react.min.js"></script>
+<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>
 ```
 
 To load a specific version of `react` and `react-dom`, replace `15` with the version number.
 
 If you use Bower, React is available via the `react` package.
 
+#### Why the `crossorigin` Attribute?
+
+If you serve React from a CDN, we recommend to keep the [`crossorigin`](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes) attribute set:
+
+```html
+<script crossorigin src="..."></script>
+```
+
+We also recommend to verify that the CDN you are using sets the `Access-Control-Allow-Origin: *` HTTP header:
+
+![Access-Control-Allow-Origin: *](/react/img/docs/cdn-cors-header.png)
+
+This enables a better [error handling experience](/react/blog/2017/07/26/error-handling-in-react-16.html) in React 16 and later.
+
 <script>
 /**
  * The code below is based on a snippet from React Native Getting Started page.

fixtures/dom/package.json

@@ -3,12 +3,13 @@
   "version": "0.1.0",
   "private": true,
   "devDependencies": {
-    "react-scripts": "0.9.5"
+    "react-scripts": "1.0.0"
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "query-string": "^4.2.3",
+    "core-js": "^2.4.1",
     "prop-types": "^15.5.6",
+    "query-string": "^4.2.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
     "semver": "^5.3.0"

fixtures/dom/public/index.html

@@ -15,7 +15,7 @@
     -->
     <title>React App</title>
     <script src="https://unpkg.com/prop-types@15.5.6/prop-types.js"></script>
-    <script src="react-loader.js"></script>
+    <script src="https://unpkg.com/expect@1.20.2/umd/expect.min.js"></script>
   </head>
   <body>
     <div id="root"></div>

fixtures/dom/public/react-loader.js

@@ -1,43 +0,0 @@
-/**
- * Take a version from the window query string and load a specific
- * version of React.
- *
- * @example
- * http://localhost:3000?version=15.4.1
- * (Loads React 15.4.1)
- */
-
-var REACT_PATH = 'react.development.js';
-var DOM_PATH = 'react-dom.development.js';
-
-function parseQuery(qstr) {
-  var query = {};
-
-  var a = qstr.substr(1).split('&');
-
-  for (var i = 0; i < a.length; i++) {
-    var b = a[i].split('=');
-
-    query[decodeURIComponent(b[0])] = decodeURIComponent(b[1] || '');
-  }
-
-  return query;
-}
-
-var query = parseQuery(window.location.search);
-var version = query.version || 'local';
-
-if (version !== 'local') {
-  REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
-  DOM_PATH = 'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
-}
-
-document.write('<script src="' + REACT_PATH + '"></script>');
-
-// Versions earlier than 14 do not use ReactDOM
-if (version === 'local' || parseFloat(version, 10) > 0.13) {
-  document.write('<script src="' + DOM_PATH + '"></script>');
-} else {
-  // Aliasing React to ReactDOM for compatibility.
-  document.write('<script>ReactDOM = React</script>');
-}

fixtures/dom/src/components/App.js

@@ -1,9 +1,9 @@
-const React = window.React;
 import Header from './Header';
 import Fixtures from './fixtures';
-
 import '../style.css';
 
+const React = window.React;
+
 function App() {
   return (
     <div>

fixtures/dom/src/components/Header.js

@@ -59,7 +59,9 @@ class Header extends React.Component {
                   Input change events
                 </option>
                 <option value="/buttons">Buttons</option>
+                <option value="/date-inputs">Date Inputs</option>
                 <option value="/error-handling">Error Handling</option>
+                <option value="/event-pooling">Event Pooling</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/fixtures/buttons/index.js

@@ -1,8 +1,8 @@
-const React = window.React;
-
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 
+const React = window.React;
+
 function onButtonClick() {
   window.alert(`This shouldn't have happened!`);
 }