Update bundle sizes for 16.6.0-alpha.0 release

* Revert "Do not bind topLevelType to dispatch (#13618)"

This reverts commit 0c9c591bfb.

.babelrc

@@ -18,8 +18,6 @@
     ["transform-es2015-spread", { "loose": true }],
     "transform-es2015-parameters",
     ["transform-es2015-destructuring", { "loose": true }],
-    ["transform-es2015-block-scoping", { "throwIfClosureRequired": true }],
-    "transform-es3-member-expression-literals",
-    "transform-es3-property-literals"
+    ["transform-es2015-block-scoping", { "throwIfClosureRequired": true }]
   ]
 }

.circleci/config.yml

@@ -3,7 +3,7 @@ jobs:
   build:
 
     docker:
-      - image: circleci/node:8
+      - image: circleci/openjdk:8-jdk-node-browsers
 
     environment:
       TZ: /usr/share/zoneinfo/America/Los_Angeles
@@ -29,7 +29,7 @@ jobs:
 
       - run:
           name: Install Packages
-          command: yarn install
+          command: yarn install --frozen-lockfile
 
       - run:
           name: Test Packages

.eslintrc.js

@@ -37,10 +37,12 @@ module.exports = {
     'no-shadow': ERROR,
     'no-unused-expressions': ERROR,
     'no-unused-vars': [ERROR, {args: 'none'}],
+    'no-use-before-define': [ERROR, {functions: false, variables: false}],
     'no-useless-concat': OFF,
     'quotes': [ERROR, 'single', {avoidEscape: true, allowTemplateLiterals: true }],
     'space-before-blocks': ERROR,
     'space-before-function-paren': OFF,
+    'valid-typeof': [ERROR, {requireStringLiterals: true}],
 
     // React & JSX
     // Our transforms set this automatically
@@ -64,6 +66,7 @@ module.exports = {
     // CUSTOM RULES
     // the second argument of warning/invariant should be a literal string
     'react-internal/no-primitive-constructors': ERROR,
+    'react-internal/no-to-warn-dev-within-to-throw': ERROR,
     'react-internal/warning-and-invariant-args': ERROR,
   },
 
@@ -81,5 +84,7 @@ module.exports = {
     spyOnDev: true,
     spyOnDevAndProd: true,
     spyOnProd: true,
+    __PROFILE__: true,
+    __UMD__: true,
   },
 };

.flowconfig

@@ -1,42 +0,0 @@
-[ignore]
-
-<PROJECT_ROOT>/fixtures/.*
-<PROJECT_ROOT>/build/.*
-<PROJECT_ROOT>/scripts/bench/.*
-
-# These shims are copied into external projects:
-<PROJECT_ROOT>/scripts/rollup/shims/facebook-www/.*
-<PROJECT_ROOT>/scripts/rollup/shims/react-native/.*
-
-<PROJECT_ROOT>/.*/node_modules/y18n/.*
-<PROJECT_ROOT>/node_modules/chrome-devtools-frontend/.*
-<PROJECT_ROOT>/node_modules/devtools-timeline-model/.*
-<PROJECT_ROOT>/node_modules/create-react-class/.*
-<PROJECT_ROOT>/.*/__mocks__/.*
-<PROJECT_ROOT>/.*/__tests__/.*
-
-[include]
-
-[libs]
-./node_modules/fbjs/flow/lib/dev.js
-./scripts/flow
-
-[options]
-esproposal.class_static_fields=enable
-esproposal.class_instance_fields=enable
-unsafe.enable_getters_and_setters=true
-
-munge_underscores=false
-
-suppress_type=$FlowIssue
-suppress_type=$FlowFixMe
-suppress_type=$FixMe
-suppress_type=$FlowExpectedError
-
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe
-suppress_comment=\\(.\\|\n\\)*\\$FlowIssue
-suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
-suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
-
-[version]
-^0.61.0

.flowcoverage

@@ -1,17 +0,0 @@
-{
-  "excludeGlob": [
-    "node_modules/**",
-    "packages/**/__mocks__/*.js",
-    "packages/**/__tests__/*.js"
-  ],
-  "includeGlob": [
-    "packages/**/src/**/*.js"
-  ],
-  "outputDir": "flow-coverage",
-  "threshold": 90,
-  "type": [
-    "html",
-    "json",
-    "text"
-  ]
-}

.gitignore

@@ -1,5 +1,6 @@
 .DS_STORE
 node_modules
+scripts/flow/*/.flowconfig
 *~
 *.pyc
 .grunt
@@ -8,7 +9,6 @@ __benchmarks__
 build/
 remote-repo/
 coverage/
-flow-coverage/
 .module-cache
 fixtures/dom/public/react-dom.js
 fixtures/dom/public/react.js
@@ -21,4 +21,4 @@ chrome-user-data
 *.iml
 .vscode
 *.swp
-*.swo
+*.swo

.prettierrc.js

@@ -6,6 +6,7 @@ module.exports = {
   jsxBracketSameLine: true,
   trailingComma: 'es5',
   printWidth: 80,
+  parser: 'babylon',
 
   overrides: [
     {

CHANGELOG.md

@@ -4,8 +4,189 @@
     Changes that have landed in master but are not yet released.
     Click to see more.
   </summary>
+
 </details>
 
+## 16.5.1 (September 13, 2018)
+
+### React
+
+* Improve the warning when `React.forwardRef` receives an unexpected number of arguments. ([@andresroberto](https://github.com/andresroberto) in [#13636](https://github.com/facebook/react/issues/13636))
+
+### React DOM
+
+* Fix a regression in unstable exports used by React Native Web. ([@aweary](https://github.com/aweary) in [#13598](https://github.com/facebook/react/issues/13598))
+* Fix a crash when component defines a method called `isReactComponent`. ([@gaearon](https://github.com/gaearon) in [#13608](https://github.com/facebook/react/issues/13608))
+* Fix a crash in development mode in IE9 when printing a warning. ([@link-alex](https://github.com/link-alex) in [#13620](https://github.com/facebook/react/issues/13620))
+* Provide a better error message when running `react-dom/profiling` with `schedule/tracking`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
+* If a `ForwardRef` component defines a `displayName`, use it in warnings. ([@probablyup](https://github.com/probablyup) in [#13615](https://github.com/facebook/react/issues/13615))
+
+### Schedule (Experimental)
+
+* Add a separate profiling entry point at `schedule/tracking-profiling`. ([@bvaughn](https://github.com/bvaughn) in [#13605](https://github.com/facebook/react/issues/13605))
+
+## 16.5.0 (September 5, 2018)
+
+### React
+
+* Add a warning if `React.forwardRef` render function doesn't take exactly two arguments ([@bvaughn](https://github.com/bvaughn) in [#13168](https://github.com/facebook/react/issues/13168))
+* Improve the error message when passing an element to `createElement` by mistake ([@DCtheTall](https://github.com/DCtheTall) in [#13131](https://github.com/facebook/react/issues/13131))
+* Don't call profiler `onRender` until after mutations ([@bvaughn](https://github.com/bvaughn) in [#13572](https://github.com/facebook/react/issues/13572))
+
+### React DOM
+
+* Add support for React DevTools Profiler ([@bvaughn](https://github.com/bvaughn) in [#13058](https://github.com/facebook/react/issues/13058))
+* Add `react-dom/profiling` entry point alias for profiling in production ([@bvaughn](https://github.com/bvaughn) in [#13570](https://github.com/facebook/react/issues/13570))
+* Add `onAuxClick` event for browsers that support it ([@jquense](https://github.com/jquense) in [#11571](https://github.com/facebook/react/issues/11571))
+* Add `movementX` and `movementY` fields to mouse events ([@jasonwilliams](https://github.com/jasonwilliams) in [#9018](https://github.com/facebook/react/issues/9018))
+* Add `tangentialPressure` and `twist` fields to pointer events ([@motiz88](https://github.com/motiz88) in [#13374](https://github.com/facebook/react/issues/13374))
+* Minimally support iframes (nested browsing contexts) in selection event handling ([@acusti](https://github.com/acusti) in [#12037](https://github.com/facebook/react/issues/12037))
+* Support passing booleans to the `focusable` SVG attribute ([@gaearon](https://github.com/gaearon) in [#13339](https://github.com/facebook/react/issues/13339))
+* Ignore `<noscript>` on the client when hydrating ([@Ephem](https://github.com/Ephem) in [#13537](https://github.com/facebook/react/issues/13537))
+* Fix `gridArea` to be treated as a unitless CSS property ([@mgol](https://github.com/mgol) in [#13550](https://github.com/facebook/react/issues/13550))
+* Fix incorrect data in `compositionend` event when typing Korean on IE11 ([@crux153](https://github.com/crux153) in [#12563](https://github.com/facebook/react/issues/12563))
+* Fix a crash when using dynamic `children` in the `<option>` tag ([@Slowyn](https://github.com/Slowyn) in [#13261](https://github.com/facebook/react/issues/13261), [@gaearon](https://github.com/gaearon) in [#13465](https://github.com/facebook/react/pull/13465))
+* Fix the `checked` attribute not getting initially set on the `input` ([@dilidili](https://github.com/dilidili) in [#13114](https://github.com/facebook/react/issues/13114))
+* Fix hydration of `dangerouslySetInnerHTML` when `__html` is not a string ([@gaearon](https://github.com/gaearon) in [#13353](https://github.com/facebook/react/issues/13353)) 
+* Fix a warning about missing controlled `onChange` to fire on falsy values too ([@nicolevy](https://github.com/nicolevy) in [#12628](https://github.com/facebook/react/issues/12628))
+* Fix `submit` and `reset` buttons getting an empty label ([@ellsclytn](https://github.com/ellsclytn) in [#12780](https://github.com/facebook/react/issues/12780))
+* Fix the `onSelect` event not being triggered after drag and drop ([@gaearon](https://github.com/gaearon) in [#13422](https://github.com/facebook/react/issues/13422))
+* Fix the `onClick` event not working inside a portal on iOS ([@aweary](https://github.com/aweary) in [#11927](https://github.com/facebook/react/issues/11927))
+* Fix a performance issue when thousands of roots are re-rendered ([@gaearon](https://github.com/gaearon) in [#13335](https://github.com/facebook/react/issues/13335))
+* Fix a performance regression that also caused `onChange` to not fire in some cases ([@gaearon](https://github.com/gaearon) in [#13423](https://github.com/facebook/react/issues/13423))
+* Handle errors in more edge cases gracefully ([@gaearon](https://github.com/gaearon) in [#13237](https://github.com/facebook/react/issues/13237) and [@acdlite](https://github.com/acdlite) in [#13269](https://github.com/facebook/react/issues/13269))
+* Don't use proxies for synthetic events in development ([@gaearon](https://github.com/gaearon) in [#12171](https://github.com/facebook/react/issues/12171))
+* Warn when `"false"` or `"true"` is the value of a boolean DOM prop ([@motiz88](https://github.com/motiz88) in [#13372](https://github.com/facebook/react/issues/13372))
+* Warn when `this.state` is initialized to `props` ([@veekas](https://github.com/veekas) in [#11658](https://github.com/facebook/react/issues/11658))
+* Don't compare `style` on hydration in IE due to noisy false positives ([@mgol](https://github.com/mgol) in [#13534](https://github.com/facebook/react/issues/13534))
+* Include `StrictMode` in the component stack ([@gaearon](https://github.com/gaearon) in [#13240](https://github.com/facebook/react/issues/13240))
+* Don't overwrite `window.event` in IE ([@ConradIrwin](https://github.com/ConradIrwin) in [#11696](https://github.com/facebook/react/issues/11696))
+* Improve component stack for the `folder/index.js` naming convention ([@gaearon](https://github.com/gaearon) in [#12059](https://github.com/facebook/react/issues/12059))
+* Improve a warning when using `getDerivedStateFromProps` without initialized state ([@flxwu](https://github.com/flxwu) in [#13317](https://github.com/facebook/react/issues/13317))
+* Improve a warning about invalid textarea usage ([@raunofreiberg](https://github.com/raunofreiberg) in [#13361](https://github.com/facebook/react/issues/13361))
+* Treat invalid Symbol and function values more consistently ([@raunofreiberg](https://github.com/raunofreiberg) in [#13362](https://github.com/facebook/react/issues/13362) and [#13389](https://github.com/facebook/react/issues/13389))
+* Allow Electron `<webview>` tag without warnings ([@philipp-spiess](https://github.com/philipp-spiess) in [#13301](https://github.com/facebook/react/issues/13301))
+* Don't show the uncaught error addendum if `e.preventDefault()` was called ([@gaearon](https://github.com/gaearon) in [#13384](https://github.com/facebook/react/issues/13384))
+* Warn about rendering Generators ([@gaearon](https://github.com/gaearon) in [#13312](https://github.com/facebook/react/issues/13312))
+* Remove irrelevant suggestion of a legacy method from a warning ([@zx6658](https://github.com/zx6658) in [#13169](https://github.com/facebook/react/issues/13169))
+* Remove `unstable_deferredUpdates` in favor of `unstable_scheduleWork` from `schedule` ([@gaearon](https://github.com/gaearon) in [#13488](https://github.com/facebook/react/issues/13488))
+* Fix unstable asynchronous mode from doing unnecessary work when an update takes too long ([@acdlite](https://github.com/acdlite) in [#13503](https://github.com/facebook/react/issues/13503))
+
+### React DOM Server
+
+* Fix crash with nullish children when using `dangerouslySetInnerHtml` in a selected `<option>` ([@mridgway](https://github.com/mridgway) in [#13078](https://github.com/facebook/react/issues/13078))
+* Fix crash when `setTimeout` is missing ([@dustinsoftware](https://github.com/dustinsoftware) in [#13088](https://github.com/facebook/react/issues/13088))
+
+### React Test Renderer and Test Utils
+
+* Fix `this` in a functional component for shallow renderer to be `undefined` ([@koba04](https://github.com/koba04) in [#13144](https://github.com/facebook/react/issues/13144))
+* Deprecate a Jest-specific `ReactTestUtils.mockComponent()` helper ([@bvaughn](https://github.com/bvaughn) in [#13193](https://github.com/facebook/react/issues/13193))
+* Warn about `ReactDOM.createPortal` usage within the test renderer ([@bvaughn](https://github.com/bvaughn) in [#12895](https://github.com/facebook/react/issues/12895))
+* Improve a confusing error message ([@gaearon](https://github.com/gaearon) in [#13351](https://github.com/facebook/react/issues/13351))
+
+### React ART
+
+* Add support for DevTools ([@yunchancho](https://github.com/yunchancho) in [#13173](https://github.com/facebook/react/issues/13173))
+
+### Schedule (Experimental)
+
+* New package for cooperatively scheduling work in a browser environment. It's used by React internally, but its public API is not finalized yet. ([@flarnie](https://github.com/flarnie) in [#12624](https://github.com/facebook/react/pull/12624))
+
+## 16.4.2 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+* Fix a crash in the server renderer when an attribute is called `hasOwnProperty`. This fix is only available in `react-dom@16.4.2`. ([@gaearon](https://github.com/gaearon) in [#13303](https://github.com/facebook/react/pull/13303))
+
+## 16.4.1 (June 13, 2018)
+
+### React
+
+* You can now assign `propTypes` to components returned by `React.ForwardRef`. ([@bvaughn](https://github.com/bvaughn) in [#12911](https://github.com/facebook/react/pull/12911))
+
+### React DOM
+
+* Fix a crash when the input `type` changes from some other types to `text`. ([@spirosikmd](https://github.com/spirosikmd) in [#12135](https://github.com/facebook/react/pull/12135))
+* Fix a crash in IE11 when restoring focus to an SVG element. ([@ThaddeusJiang](https://github.com/ThaddeusJiang) in [#12996](https://github.com/facebook/react/pull/12996))
+* Fix a range input not updating in some cases. ([@Illu](https://github.com/Illu) in [#12939](https://github.com/facebook/react/pull/12939))
+* Fix input validation triggering unnecessarily in Firefox. ([@nhunzaker](https://github.com/nhunzaker) in [#12925](https://github.com/facebook/react/pull/12925))
+* Fix an incorrect `event.target` value for the `onChange` event in IE9. ([@nhunzaker](https://github.com/nhunzaker) in [#12976](https://github.com/facebook/react/pull/12976))
+* Fix a false positive error when returning an empty `<React.Fragment />` from a component. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12966](https://github.com/facebook/react/pull/12966))
+
+### React DOM Server
+
+* Fix an incorrect value being provided by new context API. ([@ericsoderberghp](https://github.com/ericsoderberghp) in [#12985](https://github.com/facebook/react/pull/12985), [@gaearon](https://github.com/gaearon) in [#13019](https://github.com/facebook/react/pull/13019))
+
+### React Test Renderer
+
+* Allow multiple root children in test renderer traversal API. ([@gaearon](https://github.com/gaearon) in [#13017](https://github.com/facebook/react/pull/13017))
+* Fix `getDerivedStateFromProps()` in the shallow renderer to not discard the pending state. ([@fatfisz](https://github.com/fatfisz) in [#13030](https://github.com/facebook/react/pull/13030))
+
+## 16.4.0 (May 23, 2018)
+
+### React
+
+* Add a new [experimental](https://github.com/reactjs/rfcs/pull/51) `React.unstable_Profiler` component for measuring performance. ([@bvaughn](https://github.com/bvaughn) in [#12745](https://github.com/facebook/react/pull/12745))
+
+### React DOM
+
+* Add support for the Pointer Events specification. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12507](https://github.com/facebook/react/pull/12507))
+* Properly call `getDerivedStateFromProps()` regardless of the reason for re-rendering. ([@acdlite](https://github.com/acdlite) in [#12600](https://github.com/facebook/react/pull/12600) and [#12802](https://github.com/facebook/react/pull/12802))
+* Fix a bug that prevented context propagation in some cases. ([@gaearon](https://github.com/gaearon) in [#12708](https://github.com/facebook/react/pull/12708))
+* Fix re-rendering of components using `forwardRef()` on a deeper `setState()`. ([@gaearon](https://github.com/gaearon) in [#12690](https://github.com/facebook/react/pull/12690))
+* Fix some attributes incorrectly getting removed from custom element nodes. ([@airamrguez](https://github.com/airamrguez) in [#12702](https://github.com/facebook/react/pull/12702))
+* Fix context providers to not bail out on children if there's a legacy context provider above. ([@gaearon](https://github.com/gaearon) in [#12586](https://github.com/facebook/react/pull/12586))
+* Add the ability to specify `propTypes` on a context provider component. ([@nicolevy](https://github.com/nicolevy) in [#12658](https://github.com/facebook/react/pull/12658))
+* Fix a false positive warning when using `react-lifecycles-compat` in `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+* Warn when the `forwardRef()` render function has `propTypes` or `defaultProps`. ([@bvaughn](https://github.com/bvaughn) in [#12644](https://github.com/facebook/react/pull/12644))
+* Improve how `forwardRef()` and context consumers are displayed in the component stack. ([@sophiebits](https://github.com/sophiebits) in [#12777](https://github.com/facebook/react/pull/12777))
+* Change internal event names. This can break third-party packages that rely on React internals in unsupported ways. ([@philipp-spiess](https://github.com/philipp-spiess) in [#12629](https://github.com/facebook/react/pull/12629))
+
+### React Test Renderer
+
+* Fix the `getDerivedStateFromProps()` support to match the new React DOM behavior. ([@koba04](https://github.com/koba04) in [#12676](https://github.com/facebook/react/pull/12676))
+* Fix a `testInstance.parent` crash when the parent is a fragment or another special node. ([@gaearon](https://github.com/gaearon) in [#12813](https://github.com/facebook/react/pull/12813))
+* `forwardRef()` components are now discoverable by the test renderer traversal methods. ([@gaearon](https://github.com/gaearon) in [#12725](https://github.com/facebook/react/pull/12725))
+* Shallow renderer now ignores `setState()` updaters that return `null` or `undefined`. ([@koba04](https://github.com/koba04) in [#12756](https://github.com/facebook/react/pull/12756))
+
+### React ART
+
+* Fix reading context provided from the tree managed by React DOM. ([@acdlite](https://github.com/acdlite) in [#12779](https://github.com/facebook/react/pull/12779))
+
+### React Call Return (Experimental)
+
+* This experiment was deleted because it was affecting the bundle size and the API wasn't good enough. It's likely to come back in the future in some other form. ([@gaearon](https://github.com/gaearon) in [#12820](https://github.com/facebook/react/pull/12820))
+
+### React Reconciler (Experimental)
+
+* The [new host config shape](https://github.com/facebook/react/blob/c601f7a64640290af85c9f0e33c78480656b46bc/packages/react-noop-renderer/src/createReactNoop.js#L82-L285) is flat and doesn't use nested objects. ([@gaearon](https://github.com/gaearon) in [#12792](https://github.com/facebook/react/pull/12792))
+
+## 16.3.3 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
+## 16.3.2 (April 16, 2018)
+
+### React
+
+* Improve the error message when passing `null` or `undefined` to `React.cloneElement`. ([@nicolevy](https://github.com/nicolevy) in [#12534](https://github.com/facebook/react/pull/12534))
+
+### React DOM
+
+* Fix an IE crash in development when using `<StrictMode>`. ([@bvaughn](https://github.com/bvaughn) in [#12546](https://github.com/facebook/react/pull/12546))
+* Fix labels in User Timing measurements for new component types. ([@bvaughn](https://github.com/bvaughn) in [#12609](https://github.com/facebook/react/pull/12609))
+* Improve the warning about wrong component type casing. ([@nicolevy](https://github.com/nicolevy) in [#12533](https://github.com/facebook/react/pull/12533))
+* Improve general performance in development mode. ([@gaearon](https://github.com/gaearon) in [#12537](https://github.com/facebook/react/pull/12537))
+* Improve performance of the experimental `unstable_observedBits` API with nesting. ([@gaearon](https://github.com/gaearon) in [#12543](https://github.com/facebook/react/pull/12543))
+
+### React Test Renderer
+
+* Add a UMD build. ([@bvaughn](https://github.com/bvaughn) in [#12594](https://github.com/facebook/react/pull/12594))
+
 ## 16.3.1 (April 3, 2018)
 
 ### React
@@ -97,6 +278,12 @@
 
 * Fix a crash on updates. ([@rmhartog](https://github.com/rmhartog) in [#11955](https://github.com/facebook/react/pull/11955))
 
+## 16.2.1 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
 ## 16.2.0 (November 28, 2017)
 
 ### React
@@ -121,6 +308,12 @@
 
 * Many tests were rewritten against the public API. Big thanks to [everyone who contributed](https://github.com/facebook/react/issues/11299)!
 
+## 16.1.2 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
 ## 16.1.1 (November 13, 2017)
 
 ### React
@@ -211,6 +404,12 @@ Starting with 16.1.0, we will no longer be publishing new releases on Bower. You
 
 * First release of the [new experimental package](https://github.com/facebook/react/tree/master/packages/react-call-return) for parent-child communication. ([@gaearon](https://github.com/gaearon) in [#11364](https://github.com/facebook/react/pull/11364))
 
+## 16.0.1 (August 1, 2018)
+
+### React DOM Server
+
+* Fix a [potential XSS vulnerability when the attacker controls an attribute name](https://reactjs.org/blog/2018/08/01/react-v-16-4-2.html) (`CVE-2018-6341`). This fix is available in the latest `react-dom@16.4.2`, as well as in previous affected minor versions: `react-dom@16.0.1`, `react-dom@16.1.2`, `react-dom@16.2.1`, and `react-dom@16.3.3`. ([@gaearon](https://github.com/gaearon) in [#13302](https://github.com/facebook/react/pull/13302))
+
 ## 16.0.0 (September 26, 2017)
 
 ### New JS Environment Requirements
@@ -697,7 +896,7 @@ Each of these changes will continue to work as before with a new warning until t
 - `Object.is` is used in a number of places to compare values, which leads to fewer false positives, especially involving `NaN`. In particular, this affects the `shallowCompare` add-on. ([@chicoxyzzy](https://github.com/chicoxyzzy) in [#6132](https://github.com/facebook/react/pull/6132))
 - Add-Ons: ReactPerf no longer instruments adding or removing an event listener because they don’t really touch the DOM due to event delegation. ([@antoaravinth](https://github.com/antoaravinth) in [#5209](https://github.com/facebook/react/pull/5209))
 
-### Other improvements
+### Other improvements
 
 - React now uses `loose-envify` instead of `envify` so it installs fewer transitive dependencies. ([@qerub](https://github.com/qerub) in [#6303](https://github.com/facebook/react/pull/6303))
 - Shallow renderer now exposes `getMountedInstance()`. ([@glenjamin](https://github.com/glenjamin) in [#4918](https://github.com/facebook/react/pull/4918))

CODE_OF_CONDUCT.md

@@ -1,3 +1,3 @@
 # Code of Conduct
 
-Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.facebook.com/pages/876921332402685/open-source-code-of-conduct) so that you can understand what actions will and will not be tolerated.
+Facebook has adopted a Code of Conduct that we expect project participants to adhere to. Please [read the full text](https://code.fb.com/codeofconduct/) so that you can understand what actions will and will not be tolerated.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2013-present, Facebook, Inc.
+Copyright (c) Facebook, Inc. and its affiliates.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -8,15 +8,28 @@ React is a JavaScript library for building user interfaces.
 
 [Learn how to use React in your own project](https://reactjs.org/docs/getting-started.html).
 
+## Installation
+
+React has been designed for gradual adoption from the start, and **you can use as little or as much React as you need**:
+
+* Use [Online Playgrounds](https://reactjs.org/docs/getting-started.html#online-playgrounds) to get a taste of React.
+* [Add React to a Website](https://reactjs.org/docs/add-react-to-a-website.html) as a `<script>` tag in one minute.
+* [Create a New React App](https://reactjs.org/docs/create-a-new-react-app.html) if you're looking for a powerful JavaScript toolchain.
+
+You can use React as a `<script>` tag from a [CDN](https://reactjs.org/docs/cdn-links.html), or as a `react` package on [npm](https://www.npmjs.com/).
+
 ## Documentation
 
 You can find the React documentation [on the website](https://reactjs.org/docs).  
-It is divided into several sections:
 
-* [Quick Start](https://reactjs.org/docs/hello-world.html)
+Check out the [Getting Started](https://reactjs.org/docs/getting-started.html) page for a quick overview.
+
+The documentation is divided into several sections:
+
+* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
+* [Main Concepts](https://reactjs.org/docs/hello-world.html)
 * [Advanced Guides](https://reactjs.org/docs/jsx-in-depth.html)
 * [API Reference](https://reactjs.org/docs/react-api.html)
-* [Tutorial](https://reactjs.org/tutorial/tutorial.html)
 * [Where to Get Support](https://reactjs.org/community/support.html)
 * [Contributing Guide](https://reactjs.org/docs/how-to-contribute.html)
 
@@ -34,26 +47,14 @@ class HelloMessage extends React.Component {
 }
 
 ReactDOM.render(
-  <HelloMessage name="John" />,
+  <HelloMessage name="Taylor" />,
   document.getElementById('container')
 );
 ```
 
-This example will render "Hello John" into a container on the page.
+This example will render "Hello Taylor" into a container on the page.
 
-You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. We recommend using [Babel](https://babeljs.io/) with a [React preset](https://babeljs.io/docs/plugins/preset-react/) to convert JSX into native JavaScript for browsers to digest.
-
-## Installation
-
-React is available as the `react` package on [npm](https://www.npmjs.com/). It is also available on a [CDN](https://reactjs.org/docs/cdn-links.html).
-
-React is flexible and can be used in a variety of projects. You can create new apps with it, but you can also gradually introduce it into an existing codebase without doing a rewrite.
-
-The recommended way to install React depends on your project. Here you can find short guides for the most common scenarios:
-
-* [Trying Out React](https://reactjs.org/docs/try-react.html)
-* [Creating a New Application](https://reactjs.org/docs/add-react-to-a-new-app.html)
-* [Adding React to an Existing Application](https://reactjs.org/docs/add-react-to-an-existing-app.html)
+You'll notice that we used an HTML-like syntax; [we call it JSX](https://reactjs.org/docs/introducing-jsx.html). JSX is not required to use React, but it makes code more readable, and writing it feels like writing HTML. If you're using React as a `<script>` tag, read [this section](https://reactjs.org/docs/add-react-to-a-website.html#optional-try-react-with-jsx) on integrating JSX; otherwise, the [recommended JavaScript toolchains](https://reactjs.org/docs/create-a-new-react-app.html) handle it automatically.
 
 ## Contributing
 

appveyor.yml

@@ -5,8 +5,9 @@ init:
   - git config --global core.autocrlf input
 
 environment:
+  JAVA_HOME: C:\Program Files\Java\jdk1.8.0
   matrix:
-    - nodejs_version: 8
+    - nodejs_version: 10
 
 # Finish on first failed build
 matrix:
@@ -25,12 +26,12 @@ deploy: off
 
 install:
   - ps: Install-Product node $env:nodejs_version $env:platform
-  - yarn install
+  - yarn install --frozen-lockfile
 
 test_script:
   - node --version
   - yarn lint
-  - yarn flow
+#  - yarn flow-ci
   - yarn build
   - yarn test
   - yarn prettier

dangerfile.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -53,7 +53,8 @@ function generateMDTable(headers, body) {
 
 /**
  * Generates a user-readable string from a percentage change
- * @param {string[]} headers
+ * @param {number} change
+ * @param {boolean} includeEmoji
  */
 function addPercent(change, includeEmoji) {
   if (!isFinite(change)) {

fixtures/art/VectorWidget.js

@@ -1,5 +1,5 @@
 /**
- * Copyright (c) 2013-present, Facebook, Inc.
+ * Copyright (c) Facebook, Inc. and its affiliates.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

fixtures/attribute-behavior/AttributeTableSnapshot.md

@@ -277,9 +277,9 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `action=(string)`| (changed)| `"https://reactjs.com/"` |
-| `action=(empty string)`| (changed)| `"http://localhost:3000/"` |
+| `action=(empty string)`| (initial)| `"http://localhost:3000/"` |
 | `action=(array with string)`| (changed)| `"https://reactjs.com/"` |
-| `action=(empty array)`| (changed)| `"http://localhost:3000/"` |
+| `action=(empty array)`| (initial)| `"http://localhost:3000/"` |
 | `action=(object)`| (changed)| `"http://localhost:3000/result%20of%20toString()"` |
 | `action=(numeric string)`| (changed)| `"http://localhost:3000/42"` |
 | `action=(-1)`| (changed)| `"http://localhost:3000/-1"` |
@@ -287,16 +287,16 @@
 | `action=(integer)`| (changed)| `"http://localhost:3000/1"` |
 | `action=(NaN)`| (changed, warning)| `"http://localhost:3000/NaN"` |
 | `action=(float)`| (changed)| `"http://localhost:3000/99.99"` |
-| `action=(true)`| (initial, warning)| `<empty string>` |
-| `action=(false)`| (initial, warning)| `<empty string>` |
+| `action=(true)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(false)`| (initial, warning)| `"http://localhost:3000/"` |
 | `action=(string 'true')`| (changed)| `"http://localhost:3000/true"` |
 | `action=(string 'false')`| (changed)| `"http://localhost:3000/false"` |
 | `action=(string 'on')`| (changed)| `"http://localhost:3000/on"` |
 | `action=(string 'off')`| (changed)| `"http://localhost:3000/off"` |
-| `action=(symbol)`| (initial, warning)| `<empty string>` |
-| `action=(function)`| (initial, warning)| `<empty string>` |
-| `action=(null)`| (initial)| `<empty string>` |
-| `action=(undefined)`| (initial)| `<empty string>` |
+| `action=(symbol)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(function)`| (initial, warning)| `"http://localhost:3000/"` |
+| `action=(null)`| (initial)| `"http://localhost:3000/"` |
+| `action=(undefined)`| (initial)| `"http://localhost:3000/"` |
 
 ## `additive` (on `<animate>` inside `<svg>`)
 | Test Case | Flags | Result |
@@ -389,8 +389,8 @@
 | `allowFullScreen=(float)`| (changed)| `<boolean: true>` |
 | `allowFullScreen=(true)`| (changed)| `<boolean: true>` |
 | `allowFullScreen=(false)`| (initial)| `<boolean: false>` |
-| `allowFullScreen=(string 'true')`| (changed)| `<boolean: true>` |
-| `allowFullScreen=(string 'false')`| (changed)| `<boolean: true>` |
+| `allowFullScreen=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `allowFullScreen=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `allowFullScreen=(string 'on')`| (changed)| `<boolean: true>` |
 | `allowFullScreen=(string 'off')`| (changed)| `<boolean: true>` |
 | `allowFullScreen=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -739,8 +739,8 @@
 | `async=(float)`| (changed)| `<boolean: true>` |
 | `async=(true)`| (changed)| `<boolean: true>` |
 | `async=(false)`| (initial)| `<boolean: false>` |
-| `async=(string 'true')`| (changed)| `<boolean: true>` |
-| `async=(string 'false')`| (changed)| `<boolean: true>` |
+| `async=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `async=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `async=(string 'on')`| (changed)| `<boolean: true>` |
 | `async=(string 'off')`| (changed)| `<boolean: true>` |
 | `async=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -802,26 +802,26 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `autoCapitalize=(string)`| (changed)| `"words"` |
-| `autoCapitalize=(empty string)`| (initial)| `"sentences"` |
+| `autoCapitalize=(empty string)`| (initial)| `<empty string>` |
 | `autoCapitalize=(array with string)`| (changed)| `"words"` |
-| `autoCapitalize=(empty array)`| (initial)| `"sentences"` |
-| `autoCapitalize=(object)`| (initial)| `"sentences"` |
-| `autoCapitalize=(numeric string)`| (initial)| `"sentences"` |
-| `autoCapitalize=(-1)`| (initial)| `"sentences"` |
-| `autoCapitalize=(0)`| (initial)| `"sentences"` |
-| `autoCapitalize=(integer)`| (initial)| `"sentences"` |
-| `autoCapitalize=(NaN)`| (initial, warning)| `"sentences"` |
-| `autoCapitalize=(float)`| (initial)| `"sentences"` |
-| `autoCapitalize=(true)`| (initial, warning)| `"sentences"` |
-| `autoCapitalize=(false)`| (initial, warning)| `"sentences"` |
-| `autoCapitalize=(string 'true')`| (initial)| `"sentences"` |
-| `autoCapitalize=(string 'false')`| (initial)| `"sentences"` |
-| `autoCapitalize=(string 'on')`| (initial)| `"sentences"` |
+| `autoCapitalize=(empty array)`| (initial)| `<empty string>` |
+| `autoCapitalize=(object)`| (changed)| `"sentences"` |
+| `autoCapitalize=(numeric string)`| (changed)| `"sentences"` |
+| `autoCapitalize=(-1)`| (changed)| `"sentences"` |
+| `autoCapitalize=(0)`| (changed)| `"sentences"` |
+| `autoCapitalize=(integer)`| (changed)| `"sentences"` |
+| `autoCapitalize=(NaN)`| (changed, warning)| `"sentences"` |
+| `autoCapitalize=(float)`| (changed)| `"sentences"` |
+| `autoCapitalize=(true)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(false)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(string 'true')`| (changed)| `"sentences"` |
+| `autoCapitalize=(string 'false')`| (changed)| `"sentences"` |
+| `autoCapitalize=(string 'on')`| (changed)| `"sentences"` |
 | `autoCapitalize=(string 'off')`| (changed)| `"none"` |
-| `autoCapitalize=(symbol)`| (initial, warning)| `"sentences"` |
-| `autoCapitalize=(function)`| (initial, warning)| `"sentences"` |
-| `autoCapitalize=(null)`| (initial)| `"sentences"` |
-| `autoCapitalize=(undefined)`| (initial)| `"sentences"` |
+| `autoCapitalize=(symbol)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(function)`| (initial, warning)| `<empty string>` |
+| `autoCapitalize=(null)`| (initial)| `<empty string>` |
+| `autoCapitalize=(undefined)`| (initial)| `<empty string>` |
 
 ## `autoComplete` (on `<input>` inside `<div>`)
 | Test Case | Flags | Result |
@@ -889,8 +889,8 @@
 | `autoPlay=(float)`| (changed)| `<boolean: true>` |
 | `autoPlay=(true)`| (changed)| `<boolean: true>` |
 | `autoPlay=(false)`| (initial)| `<boolean: false>` |
-| `autoPlay=(string 'true')`| (changed)| `<boolean: true>` |
-| `autoPlay=(string 'false')`| (changed)| `<boolean: true>` |
+| `autoPlay=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `autoPlay=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `autoPlay=(string 'on')`| (changed)| `<boolean: true>` |
 | `autoPlay=(string 'off')`| (changed)| `<boolean: true>` |
 | `autoPlay=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -1389,8 +1389,8 @@
 | `checked=(float)`| (changed)| `<boolean: true>` |
 | `checked=(true)`| (changed)| `<boolean: true>` |
 | `checked=(false)`| (initial)| `<boolean: false>` |
-| `checked=(string 'true')`| (changed)| `<boolean: true>` |
-| `checked=(string 'false')`| (changed)| `<boolean: true>` |
+| `checked=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `checked=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `checked=(string 'on')`| (changed)| `<boolean: true>` |
 | `checked=(string 'off')`| (changed)| `<boolean: true>` |
 | `checked=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -1401,23 +1401,23 @@
 ## `Checked` (on `<input>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `Checked=(string)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(empty string)`| (changed, warning)| `<empty string>` |
-| `Checked=(array with string)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(empty array)`| (changed, warning)| `<empty string>` |
-| `Checked=(object)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(numeric string)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(-1)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(0)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(integer)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(NaN)`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(float)`| (changed, warning, ssr mismatch)| `<empty string>` |
+| `Checked=(string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(empty string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(array with string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(empty array)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(object)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(numeric string)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(-1)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(0)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(integer)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(NaN)`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(float)`| (initial, warning, ssr mismatch)| `<null>` |
 | `Checked=(true)`| (initial, warning)| `<null>` |
 | `Checked=(false)`| (initial, warning)| `<null>` |
-| `Checked=(string 'true')`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(string 'false')`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(string 'on')`| (changed, warning, ssr mismatch)| `<empty string>` |
-| `Checked=(string 'off')`| (changed, warning, ssr mismatch)| `<empty string>` |
+| `Checked=(string 'true')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'false')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'on')`| (initial, warning, ssr mismatch)| `<null>` |
+| `Checked=(string 'off')`| (initial, warning, ssr mismatch)| `<null>` |
 | `Checked=(symbol)`| (initial, warning)| `<null>` |
 | `Checked=(function)`| (initial, warning)| `<null>` |
 | `Checked=(null)`| (initial, warning)| `<null>` |
@@ -2139,8 +2139,8 @@
 | `controls=(float)`| (changed)| `<boolean: true>` |
 | `controls=(true)`| (changed)| `<boolean: true>` |
 | `controls=(false)`| (initial)| `<boolean: false>` |
-| `controls=(string 'true')`| (changed)| `<boolean: true>` |
-| `controls=(string 'false')`| (changed)| `<boolean: true>` |
+| `controls=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `controls=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `controls=(string 'on')`| (changed)| `<boolean: true>` |
 | `controls=(string 'off')`| (changed)| `<boolean: true>` |
 | `controls=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2514,8 +2514,8 @@
 | `default=(float)`| (changed)| `<boolean: true>` |
 | `default=(true)`| (changed)| `<boolean: true>` |
 | `default=(false)`| (initial)| `<boolean: false>` |
-| `default=(string 'true')`| (changed)| `<boolean: true>` |
-| `default=(string 'false')`| (changed)| `<boolean: true>` |
+| `default=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `default=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `default=(string 'on')`| (changed)| `<boolean: true>` |
 | `default=(string 'off')`| (changed)| `<boolean: true>` |
 | `default=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2551,25 +2551,25 @@
 ## `defaultChecked` (on `<input>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `defaultChecked=(string)`| (initial, ssr mismatch)| `<boolean: false>` |
+| `defaultChecked=(string)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(empty string)`| (initial)| `<boolean: false>` |
-| `defaultChecked=(array with string)`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(empty array)`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(object)`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(numeric string)`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(-1)`| (initial, ssr mismatch)| `<boolean: false>` |
+| `defaultChecked=(array with string)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(empty array)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(object)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(numeric string)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(-1)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(0)`| (initial)| `<boolean: false>` |
-| `defaultChecked=(integer)`| (initial, ssr mismatch)| `<boolean: false>` |
+| `defaultChecked=(integer)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(NaN)`| (initial, warning, ssr warning)| `<boolean: false>` |
-| `defaultChecked=(float)`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(true)`| (initial, ssr mismatch)| `<boolean: false>` |
+| `defaultChecked=(float)`| (changed)| `<boolean: true>` |
+| `defaultChecked=(true)`| (changed)| `<boolean: true>` |
 | `defaultChecked=(false)`| (initial)| `<boolean: false>` |
-| `defaultChecked=(string 'true')`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(string 'false')`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(string 'on')`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(string 'off')`| (initial, ssr mismatch)| `<boolean: false>` |
-| `defaultChecked=(symbol)`| (initial)| `<boolean: false>` |
-| `defaultChecked=(function)`| (initial)| `<boolean: false>` |
+| `defaultChecked=(string 'true')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'false')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'on')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(string 'off')`| (changed)| `<boolean: true>` |
+| `defaultChecked=(symbol)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `defaultChecked=(function)`| (changed, ssr mismatch)| `<boolean: true>` |
 | `defaultChecked=(null)`| (initial)| `<boolean: false>` |
 | `defaultChecked=(undefined)`| (initial)| `<boolean: false>` |
 
@@ -2639,8 +2639,8 @@
 | `defer=(float)`| (changed)| `<boolean: true>` |
 | `defer=(true)`| (changed)| `<boolean: true>` |
 | `defer=(false)`| (initial)| `<boolean: false>` |
-| `defer=(string 'true')`| (changed)| `<boolean: true>` |
-| `defer=(string 'false')`| (changed)| `<boolean: true>` |
+| `defer=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `defer=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `defer=(string 'on')`| (changed)| `<boolean: true>` |
 | `defer=(string 'off')`| (changed)| `<boolean: true>` |
 | `defer=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -2764,8 +2764,8 @@
 | `disabled=(float)`| (changed)| `<boolean: true>` |
 | `disabled=(true)`| (changed)| `<boolean: true>` |
 | `disabled=(false)`| (initial)| `<boolean: false>` |
-| `disabled=(string 'true')`| (changed)| `<boolean: true>` |
-| `disabled=(string 'false')`| (changed)| `<boolean: true>` |
+| `disabled=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `disabled=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `disabled=(string 'on')`| (changed)| `<boolean: true>` |
 | `disabled=(string 'off')`| (changed)| `<boolean: true>` |
 | `disabled=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -3587,8 +3587,8 @@
 | `focusable=(integer)`| (changed)| `"1"` |
 | `focusable=(NaN)`| (changed, warning)| `"NaN"` |
 | `focusable=(float)`| (changed)| `"99.99"` |
-| `focusable=(true)`| (initial, warning)| `<null>` |
-| `focusable=(false)`| (initial, warning)| `<null>` |
+| `focusable=(true)`| (changed)| `"true"` |
+| `focusable=(false)`| (changed)| `"false"` |
 | `focusable=(string 'true')`| (changed)| `"true"` |
 | `focusable=(string 'false')`| (changed)| `"false"` |
 | `focusable=(string 'on')`| (changed)| `"on"` |
@@ -4139,8 +4139,8 @@
 | `formNoValidate=(float)`| (changed)| `<boolean: true>` |
 | `formNoValidate=(true)`| (changed)| `<boolean: true>` |
 | `formNoValidate=(false)`| (initial)| `<boolean: false>` |
-| `formNoValidate=(string 'true')`| (changed)| `<boolean: true>` |
-| `formNoValidate=(string 'false')`| (changed)| `<boolean: true>` |
+| `formNoValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `formNoValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `formNoValidate=(string 'on')`| (changed)| `<boolean: true>` |
 | `formNoValidate=(string 'off')`| (changed)| `<boolean: true>` |
 | `formNoValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -4764,8 +4764,8 @@
 | `hidden=(float)`| (changed)| `<boolean: true>` |
 | `hidden=(true)`| (changed)| `<boolean: true>` |
 | `hidden=(false)`| (initial)| `<boolean: false>` |
-| `hidden=(string 'true')`| (changed)| `<boolean: true>` |
-| `hidden=(string 'false')`| (changed)| `<boolean: true>` |
+| `hidden=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `hidden=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `hidden=(string 'on')`| (changed)| `<boolean: true>` |
 | `hidden=(string 'off')`| (changed)| `<boolean: true>` |
 | `hidden=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -5489,8 +5489,8 @@
 | `itemScope=(float)`| (changed)| `<empty string>` |
 | `itemScope=(true)`| (changed)| `<empty string>` |
 | `itemScope=(false)`| (initial)| `<null>` |
-| `itemScope=(string 'true')`| (changed)| `<empty string>` |
-| `itemScope=(string 'false')`| (changed)| `<empty string>` |
+| `itemScope=(string 'true')`| (changed, warning)| `<empty string>` |
+| `itemScope=(string 'false')`| (changed, warning)| `<empty string>` |
 | `itemScope=(string 'on')`| (changed)| `<empty string>` |
 | `itemScope=(string 'off')`| (changed)| `<empty string>` |
 | `itemScope=(symbol)`| (initial, warning)| `<null>` |
@@ -6239,8 +6239,8 @@
 | `loop=(float)`| (changed)| `<boolean: true>` |
 | `loop=(true)`| (changed)| `<boolean: true>` |
 | `loop=(false)`| (initial)| `<boolean: false>` |
-| `loop=(string 'true')`| (changed)| `<boolean: true>` |
-| `loop=(string 'false')`| (changed)| `<boolean: true>` |
+| `loop=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `loop=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `loop=(string 'on')`| (changed)| `<boolean: true>` |
 | `loop=(string 'off')`| (changed)| `<boolean: true>` |
 | `loop=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -7064,8 +7064,8 @@
 | `multiple=(float)`| (changed)| `<boolean: true>` |
 | `multiple=(true)`| (changed)| `<boolean: true>` |
 | `multiple=(false)`| (initial)| `<boolean: false>` |
-| `multiple=(string 'true')`| (changed)| `<boolean: true>` |
-| `multiple=(string 'false')`| (changed)| `<boolean: true>` |
+| `multiple=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `multiple=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `multiple=(string 'on')`| (changed)| `<boolean: true>` |
 | `multiple=(string 'off')`| (changed)| `<boolean: true>` |
 | `multiple=(symbol)`| (changed, warning, ssr mismatch)| `<boolean: true>` |
@@ -7076,23 +7076,23 @@
 ## `muted` (on `<video>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
-| `muted=(string)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `muted=(string)`| (changed)| `<boolean: true>` |
 | `muted=(empty string)`| (initial)| `<boolean: false>` |
-| `muted=(array with string)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(empty array)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(object)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(numeric string)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(-1)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `muted=(array with string)`| (changed)| `<boolean: true>` |
+| `muted=(empty array)`| (changed)| `<boolean: true>` |
+| `muted=(object)`| (changed)| `<boolean: true>` |
+| `muted=(numeric string)`| (changed)| `<boolean: true>` |
+| `muted=(-1)`| (changed)| `<boolean: true>` |
 | `muted=(0)`| (initial)| `<boolean: false>` |
-| `muted=(integer)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `muted=(integer)`| (changed)| `<boolean: true>` |
 | `muted=(NaN)`| (initial, warning)| `<boolean: false>` |
-| `muted=(float)`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(true)`| (changed, ssr mismatch)| `<boolean: true>` |
+| `muted=(float)`| (changed)| `<boolean: true>` |
+| `muted=(true)`| (changed)| `<boolean: true>` |
 | `muted=(false)`| (initial)| `<boolean: false>` |
-| `muted=(string 'true')`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(string 'false')`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(string 'on')`| (changed, ssr mismatch)| `<boolean: true>` |
-| `muted=(string 'off')`| (changed, ssr mismatch)| `<boolean: true>` |
+| `muted=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `muted=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `muted=(string 'on')`| (changed)| `<boolean: true>` |
+| `muted=(string 'off')`| (changed)| `<boolean: true>` |
 | `muted=(symbol)`| (initial, warning)| `<boolean: false>` |
 | `muted=(function)`| (initial, warning)| `<boolean: false>` |
 | `muted=(null)`| (initial)| `<boolean: false>` |
@@ -7148,6 +7148,31 @@
 | `name=(null)`| (initial)| `<null>` |
 | `name=(undefined)`| (initial)| `<null>` |
 
+## `noModule` (on `<script>` inside `<div>`)
+| Test Case | Flags | Result |
+| --- | --- | --- |
+| `noModule=(string)`| (changed)| `<boolean: true>` |
+| `noModule=(empty string)`| (initial)| `<boolean: false>` |
+| `noModule=(array with string)`| (changed)| `<boolean: true>` |
+| `noModule=(empty array)`| (changed)| `<boolean: true>` |
+| `noModule=(object)`| (changed)| `<boolean: true>` |
+| `noModule=(numeric string)`| (changed)| `<boolean: true>` |
+| `noModule=(-1)`| (changed)| `<boolean: true>` |
+| `noModule=(0)`| (initial)| `<boolean: false>` |
+| `noModule=(integer)`| (changed)| `<boolean: true>` |
+| `noModule=(NaN)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(float)`| (changed)| `<boolean: true>` |
+| `noModule=(true)`| (changed)| `<boolean: true>` |
+| `noModule=(false)`| (initial)| `<boolean: false>` |
+| `noModule=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `noModule=(string 'false')`| (changed, warning)| `<boolean: true>` |
+| `noModule=(string 'on')`| (changed)| `<boolean: true>` |
+| `noModule=(string 'off')`| (changed)| `<boolean: true>` |
+| `noModule=(symbol)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(function)`| (initial, warning)| `<boolean: false>` |
+| `noModule=(null)`| (initial)| `<boolean: false>` |
+| `noModule=(undefined)`| (initial)| `<boolean: false>` |
+
 ## `nonce` (on `<div>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
@@ -7173,31 +7198,6 @@
 | `nonce=(null)`| (initial)| `<null>` |
 | `nonce=(undefined)`| (initial)| `<null>` |
 
-## `noModule` (on `<script>` inside `<div>`)
-| Test Case | Flags | Result |
-| --- | --- | --- |
-| `noModule=(string)`| (changed)| `<boolean: true>` |
-| `noModule=(empty string)`| (initial)| `<boolean: false>` |
-| `noModule=(array with string)`| (changed)| `<boolean: true>` |
-| `noModule=(empty array)`| (changed)| `<boolean: true>` |
-| `noModule=(object)`| (changed)| `<boolean: true>` |
-| `noModule=(numeric string)`| (changed)| `<boolean: true>` |
-| `noModule=(-1)`| (changed)| `<boolean: true>` |
-| `noModule=(0)`| (initial)| `<boolean: false>` |
-| `noModule=(integer)`| (changed)| `<boolean: true>` |
-| `noModule=(NaN)`| (initial, warning)| `<boolean: false>` |
-| `noModule=(float)`| (changed)| `<boolean: true>` |
-| `noModule=(true)`| (changed)| `<boolean: true>` |
-| `noModule=(false)`| (initial)| `<boolean: false>` |
-| `noModule=(string 'true')`| (changed)| `<boolean: true>` |
-| `noModule=(string 'false')`| (changed)| `<boolean: true>` |
-| `noModule=(string 'on')`| (changed)| `<boolean: true>` |
-| `noModule=(string 'off')`| (changed)| `<boolean: true>` |
-| `noModule=(symbol)`| (initial, warning)| `<boolean: false>` |
-| `noModule=(function)`| (initial, warning)| `<boolean: false>` |
-| `noModule=(null)`| (initial)| `<boolean: false>` |
-| `noModule=(undefined)`| (initial)| `<boolean: false>` |
-
 ## `noValidate` (on `<form>` inside `<div>`)
 | Test Case | Flags | Result |
 | --- | --- | --- |
@@ -7214,8 +7214,8 @@
 | `noValidate=(float)`| (changed)| `<boolean: true>` |
 | `noValidate=(true)`| (changed)| `<boolean: true>` |
 | `noValidate=(false)`| (initial)| `<boolean: false>` |
-| `noValidate=(string 'true')`| (changed)| `<boolean: true>` |
-| `noValidate=(string 'false')`| (changed)| `<boolean: true>` |
+| `noValidate=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `noValidate=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `noValidate=(string 'on')`| (changed)| `<boolean: true>` |
 | `noValidate=(string 'off')`| (changed)| `<boolean: true>` |
 | `noValidate=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -7464,8 +7464,8 @@
 | `open=(float)`| (changed)| `<boolean: true>` |
 | `open=(true)`| (changed)| `<boolean: true>` |
 | `open=(false)`| (initial)| `<boolean: false>` |
-| `open=(string 'true')`| (changed)| `<boolean: true>` |
-| `open=(string 'false')`| (changed)| `<boolean: true>` |
+| `open=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `open=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `open=(string 'on')`| (changed)| `<boolean: true>` |
 | `open=(string 'off')`| (changed)| `<boolean: true>` |
 | `open=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8014,8 +8014,8 @@
 | `playsInline=(float)`| (changed)| `<empty string>` |
 | `playsInline=(true)`| (changed)| `<empty string>` |
 | `playsInline=(false)`| (initial)| `<null>` |
-| `playsInline=(string 'true')`| (changed)| `<empty string>` |
-| `playsInline=(string 'false')`| (changed)| `<empty string>` |
+| `playsInline=(string 'true')`| (changed, warning)| `<empty string>` |
+| `playsInline=(string 'false')`| (changed, warning)| `<empty string>` |
 | `playsInline=(string 'on')`| (changed)| `<empty string>` |
 | `playsInline=(string 'off')`| (changed)| `<empty string>` |
 | `playsInline=(symbol)`| (initial, warning)| `<null>` |
@@ -8227,26 +8227,26 @@
 | Test Case | Flags | Result |
 | --- | --- | --- |
 | `preload=(string)`| (changed)| `"none"` |
-| `preload=(empty string)`| (initial)| `"auto"` |
+| `preload=(empty string)`| (changed)| `"auto"` |
 | `preload=(array with string)`| (changed)| `"none"` |
-| `preload=(empty array)`| (initial)| `"auto"` |
-| `preload=(object)`| (initial)| `"auto"` |
-| `preload=(numeric string)`| (initial)| `"auto"` |
-| `preload=(-1)`| (initial)| `"auto"` |
-| `preload=(0)`| (initial)| `"auto"` |
-| `preload=(integer)`| (initial)| `"auto"` |
-| `preload=(NaN)`| (initial, warning)| `"auto"` |
-| `preload=(float)`| (initial)| `"auto"` |
-| `preload=(true)`| (initial, warning)| `"auto"` |
-| `preload=(false)`| (initial, warning)| `"auto"` |
-| `preload=(string 'true')`| (initial)| `"auto"` |
-| `preload=(string 'false')`| (initial)| `"auto"` |
-| `preload=(string 'on')`| (initial)| `"auto"` |
-| `preload=(string 'off')`| (initial)| `"auto"` |
-| `preload=(symbol)`| (initial, warning)| `"auto"` |
-| `preload=(function)`| (initial, warning)| `"auto"` |
-| `preload=(null)`| (initial)| `"auto"` |
-| `preload=(undefined)`| (initial)| `"auto"` |
+| `preload=(empty array)`| (changed)| `"auto"` |
+| `preload=(object)`| (initial)| `"metadata"` |
+| `preload=(numeric string)`| (initial)| `"metadata"` |
+| `preload=(-1)`| (initial)| `"metadata"` |
+| `preload=(0)`| (initial)| `"metadata"` |
+| `preload=(integer)`| (initial)| `"metadata"` |
+| `preload=(NaN)`| (initial, warning)| `"metadata"` |
+| `preload=(float)`| (initial)| `"metadata"` |
+| `preload=(true)`| (initial, warning)| `"metadata"` |
+| `preload=(false)`| (initial, warning)| `"metadata"` |
+| `preload=(string 'true')`| (initial)| `"metadata"` |
+| `preload=(string 'false')`| (initial)| `"metadata"` |
+| `preload=(string 'on')`| (initial)| `"metadata"` |
+| `preload=(string 'off')`| (initial)| `"metadata"` |
+| `preload=(symbol)`| (initial, warning)| `"metadata"` |
+| `preload=(function)`| (initial, warning)| `"metadata"` |
+| `preload=(null)`| (initial)| `"metadata"` |
+| `preload=(undefined)`| (initial)| `"metadata"` |
 
 ## `preserveAlpha` (on `<feConvolveMatrix>` inside `<svg>`)
 | Test Case | Flags | Result |
@@ -8489,8 +8489,8 @@
 | `readOnly=(float)`| (changed)| `<boolean: true>` |
 | `readOnly=(true)`| (changed)| `<boolean: true>` |
 | `readOnly=(false)`| (initial)| `<boolean: false>` |
-| `readOnly=(string 'true')`| (changed)| `<boolean: true>` |
-| `readOnly=(string 'false')`| (changed)| `<boolean: true>` |
+| `readOnly=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `readOnly=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `readOnly=(string 'on')`| (changed)| `<boolean: true>` |
 | `readOnly=(string 'off')`| (changed)| `<boolean: true>` |
 | `readOnly=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8714,8 +8714,8 @@
 | `required=(float)`| (changed)| `<boolean: true>` |
 | `required=(true)`| (changed)| `<boolean: true>` |
 | `required=(false)`| (initial)| `<boolean: false>` |
-| `required=(string 'true')`| (changed)| `<boolean: true>` |
-| `required=(string 'false')`| (changed)| `<boolean: true>` |
+| `required=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `required=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `required=(string 'on')`| (changed)| `<boolean: true>` |
 | `required=(string 'off')`| (changed)| `<boolean: true>` |
 | `required=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8889,8 +8889,8 @@
 | `reversed=(float)`| (changed)| `<boolean: true>` |
 | `reversed=(true)`| (changed)| `<boolean: true>` |
 | `reversed=(false)`| (initial)| `<boolean: false>` |
-| `reversed=(string 'true')`| (changed)| `<boolean: true>` |
-| `reversed=(string 'false')`| (changed)| `<boolean: true>` |
+| `reversed=(string 'true')`| (changed, warning)| `<boolean: true>` |
+| `reversed=(string 'false')`| (changed, warning)| `<boolean: true>` |
 | `reversed=(string 'on')`| (changed)| `<boolean: true>` |
 | `reversed=(string 'off')`| (changed)| `<boolean: true>` |
 | `reversed=(symbol)`| (initial, warning)| `<boolean: false>` |
@@ -8983,7 +8983,7 @@
 | `rowSpan=(object)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
 | `rowSpan=(numeric string)`| (changed, ssr error, ssr mismatch)| `<number: 42>` |
 | `rowSpan=(-1)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
-| `rowSpan=(0)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
+| `rowSpan=(0)`| (changed, ssr error, ssr mismatch)| `<number: 0>` |
 | `rowSpan=(integer)`| (initial, ssr error, ssr mismatch)| `<number: 1>` |
 | `rowSpan=(NaN)`| (initial, warning, ssr error, ssr mismatch)| `<number: 1>` |
 | `rowSpan=(float)`| (changed, ssr error, ssr mismatch)| `<number: 99>` |
@@ -9139,8 +9139,8 @@
 | `scoped=(float)`| (changed)| `<empty string>` |
 | `scoped=(true)`| (changed)| `<empty string>` |
 | `scoped=(false)`| (initial)| `<null>` |
-| `scoped=(string 'true')`| (changed)| `<empty string>` |
-| `scoped=(string 'false')`| (changed)| `<empty string>` |
+| `scoped=(string 'true')`| (changed, warning)| `<empty string>` |
+| `scoped=(string 'false')`| (changed, warning)| `<empty string>` |
 | `scoped=(string 'on')`| (changed)| `<empty string>` |
 | `scoped=(string 'off')`| (changed)| `<empty string>` |
 | `scoped=(symbol)`| (initial, warning)| `<null>` |
@@ -9189,8 +9189,8 @@
 | `seamless=(float)`| (changed)| `<empty string>` |
 | `seamless=(true)`| (changed)| `<empty string>` |
 | `seamless=(false)`| (initial)| `<null>` |
-| `seamless=(string 'true')`| (changed)| `<empty string>` |
-| `seamless=(string 'false')`| (changed)| `<empty string>` |
+| `seamless=(string 'true')`| (changed, warning)| `<empty string>` |
+| `seamless=(string 'false')`| (changed, warning)| `<empty string>` |
 | `seamless=(string 'on')`| (changed)| `<empty string>` |
 | `seamless=(string 'off')`| (changed)| `<empty string>` |
 | `seamless=(symbol)`| (initial, warning)| `<null>` |
@@ -9264,8 +9264,8 @@
 | `selected=(float)`| (initial, warning, ssr warning)| `<boolean: true>` |
 | `selected=(true)`| (initial, warning, ssr warning)| `<boolean: true>` |
 | `selected=(false)`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(string 'true')`| (initial, warning, ssr warning)| `<boolean: true>` |
-| `selected=(string 'false')`| (initial, warning, ssr warning)| `<boolean: true>` |
+| `selected=(string 'true')`| (initial, warning)| `<boolean: true>` |
+| `selected=(string 'false')`| (initial, warning)| `<boolean: true>` |
 | `selected=(string 'on')`| (initial, warning, ssr warning)| `<boolean: true>` |
 | `selected=(string 'off')`| (initial, warning, ssr warning)| `<boolean: true>` |
 | `selected=(symbol)`| (initial, warning)| `<boolean: true>` |
@@ -11868,8 +11868,8 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (changed, error, warning, ssr error)| `` |
-| `value=(function)`| (changed, warning, ssr warning)| `"function f() {}"` |
+| `value=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<empty string>` |
+| `value=(function)`| (initial, warning, ssr mismatch)| `<empty string>` |
 | `value=(null)`| (initial, warning, ssr warning)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 
@@ -11893,8 +11893,8 @@
 | `value=(string 'false')`| (changed)| `"false"` |
 | `value=(string 'on')`| (changed)| `"on"` |
 | `value=(string 'off')`| (changed)| `"off"` |
-| `value=(symbol)`| (changed, error, warning, ssr mismatch)| `` |
-| `value=(function)`| (changed, warning, ssr mismatch)| `"function f() {}"` |
+| `value=(symbol)`| (initial, warning)| `<empty string>` |
+| `value=(function)`| (initial, warning)| `<empty string>` |
 | `value=(null)`| (initial)| `<empty string>` |
 | `value=(undefined)`| (initial)| `<empty string>` |
 

fixtures/attribute-behavior/README.md

@@ -20,7 +20,7 @@ The left box shows the property (or attribute) assigned by React 15.\*, and the
 right box shows the property (or attribute) assigned by the latest version of
 React 16.
 
-Right now we use a purple outline to call out cases where the assigned property
+Right now, we use a purple outline to call out cases where the assigned property
 (or attribute) has changed between React 15 and 16.
 
 ---

fixtures/dom/.gitignore

@@ -10,6 +10,7 @@ coverage
 build
 public/react.development.js
 public/react-dom.development.js
+public/react-dom-server.browser.development.js
 
 # misc
 .DS_Store

fixtures/dom/package.json

@@ -6,17 +6,19 @@
     "react-scripts": "^1.0.11"
   },
   "dependencies": {
+    "@babel/standalone": "^7.0.0",
     "classnames": "^2.2.5",
+    "codemirror": "^5.40.0",
     "core-js": "^2.4.1",
     "prop-types": "^15.6.0",
     "query-string": "^4.2.3",
     "react": "^15.4.1",
     "react-dom": "^15.4.1",
-    "semver": "^5.3.0"
+    "semver": "^5.5.0"
   },
   "scripts": {
     "start": "react-scripts start",
-    "prestart": "cp ../../build/dist/react.development.js public/ && cp ../../build/dist/react-dom.development.js public/",
+    "prestart": "cp ../../build/dist/react.development.js ../../build/dist/react-dom.development.js ../../build/dist/react-dom-server.browser.development.js public/",
     "build": "react-scripts build && cp build/index.html build/200.html",
     "test": "react-scripts test --env=jsdom",
     "eject": "react-scripts eject"

fixtures/dom/public/renderer.html

@@ -0,0 +1,86 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Renderer</title>
+    <style>
+      *,
+      *:before,
+      *:after {
+        box-sizing: border-box;
+      }
+
+      html,
+      body {
+        font-family: sans-serif;
+        margin: 0;
+        height: 100%;
+      }
+
+      body {
+        padding-top: 32px;
+      }
+
+      #status {
+        font-size: 12px;
+        left: 8px;
+        letter-spacing: 0.05em;
+        line-height: 16px;
+        margin: -8px 0 0;
+        max-width: 50%;
+        overflow: hidden;
+        position: absolute;
+        text-align: left;
+        text-overflow: ellipsis;
+        top: 50%;
+        white-space: nowrap;
+        width: 100%;
+      }
+
+      #output {
+        margin: 16px;
+      }
+
+      .header {
+        background: white;
+        border-bottom: 1px solid #d9d9d9;
+        padding: 4px;
+        top: 0;
+        left: 0;
+        position: fixed;
+        width: 100%;
+        text-align: right;
+      }
+
+      .controls {
+        display: inline-block;
+        margin: 0;
+      }
+
+      .button {
+        background: #eee;
+        border-radius: 2px;
+        border: 1px solid #aaa;
+        font-size: 11px;
+        padding: 4px 6px;
+        text-transform: uppercase;
+      }
+    </style>
+  </head>
+  <body>
+    <header class="header">
+      <p id="status">Loading</p>
+
+      <menu class="controls">
+        <button class="button" id="hydrate">Hydrate</button>
+        <button class="button" id="reload">Reload</button>
+      </menu>
+    </header>
+
+    <div id="output"></div>
+
+    <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
+    <script src="renderer.js"></script>
+  </body>
+</html>

fixtures/dom/public/renderer.js

@@ -0,0 +1,141 @@
+/**
+ * Supports render.html, a piece of the hydration fixture. See /hydration
+ */
+
+'use strict';
+
+(function() {
+  var Fixture = null;
+  var output = document.getElementById('output');
+  var status = document.getElementById('status');
+  var hydrate = document.getElementById('hydrate');
+  var reload = document.getElementById('reload');
+  var renders = 0;
+  var failed = false;
+
+  function getQueryParam(key) {
+    var pattern = new RegExp(key + '=([^&]+)(&|$)');
+    var matches = window.location.search.match(pattern);
+
+    if (matches) {
+      return decodeURIComponent(matches[1]);
+    }
+
+    handleError(new Error('No key found for' + key));
+  }
+
+  function getBooleanQueryParam(key) {
+    return getQueryParam(key) === 'true';
+  }
+
+  function setStatus(label) {
+    status.innerHTML = label;
+  }
+
+  function prerender() {
+    setStatus('Generating markup');
+
+    output.innerHTML = ReactDOMServer.renderToString(
+      React.createElement(Fixture)
+    );
+
+    setStatus('Markup only (No React)');
+  }
+
+  function render() {
+    setStatus('Hydrating');
+
+    if (ReactDOM.hydrate) {
+      ReactDOM.hydrate(React.createElement(Fixture), output);
+    } else {
+      ReactDOM.render(React.createElement(Fixture), output);
+    }
+
+    setStatus(renders > 0 ? 'Re-rendered (' + renders + 'x)' : 'Hydrated');
+    renders += 1;
+    hydrate.innerHTML = 'Re-render';
+  }
+
+  function handleError(error) {
+    console.log(error);
+    failed = true;
+    setStatus('Javascript Error');
+    output.innerHTML = error;
+  }
+
+  function loadScript(src) {
+    return new Promise(function(resolve, reject) {
+      var script = document.createElement('script');
+      script.async = true;
+      script.src = src;
+
+      script.onload = resolve;
+      script.onerror = function(error) {
+        reject(new Error('Unable to load ' + src));
+      };
+
+      document.body.appendChild(script);
+    });
+  }
+
+  function injectFixture(src) {
+    Fixture = new Function(src + '\nreturn Fixture;')();
+
+    if (typeof Fixture === 'undefined') {
+      setStatus('Failed');
+      output.innerHTML = 'Please name your root component "Fixture"';
+    } else {
+      prerender();
+
+      if (getBooleanQueryParam('hydrate')) {
+        render();
+      }
+    }
+  }
+
+  function reloadFixture(code) {
+    renders = 0;
+    ReactDOM.unmountComponentAtNode(output);
+    injectFixture(code);
+  }
+
+  window.onerror = handleError;
+
+  reload.onclick = function() {
+    window.location.reload();
+  };
+
+  hydrate.onclick = render;
+
+  loadScript(getQueryParam('reactPath'))
+    .then(function() {
+      return getBooleanQueryParam('needsReactDOM')
+        ? loadScript(getQueryParam('reactDOMPath'))
+        : null;
+    })
+    .then(function() {
+      return loadScript(getQueryParam('reactDOMServerPath'));
+    })
+    .then(function() {
+      if (failed) {
+        return;
+      }
+
+      window.addEventListener('message', function(event) {
+        var data = JSON.parse(event.data);
+
+        switch (data.type) {
+          case 'code':
+            reloadFixture(data.payload);
+            break;
+          default:
+            throw new Error(
+              'Renderer Error: Unrecognized message "' + data.type + '"'
+            );
+        }
+      });
+
+      window.parent.postMessage(JSON.stringify({type: 'ready'}), '*');
+    })
+    .catch(handleError);
+})();

fixtures/dom/src/components/App.js

@@ -8,9 +8,7 @@ function App() {
   return (
     <div>
       <Header />
-      <div className="container">
-        <Fixtures />
-      </div>
+      <Fixtures />
     </div>
   );
 }

fixtures/dom/src/components/Fixture.js

@@ -1,4 +1,4 @@
-const PropTypes = window.PropTypes;
+import PropTypes from 'prop-types';
 const React = window.React;
 
 const propTypes = {

fixtures/dom/src/components/FixtureSet.js

@@ -3,7 +3,7 @@ const React = window.React;
 
 const propTypes = {
   title: PropTypes.node.isRequired,
-  description: PropTypes.node.isRequired,
+  description: PropTypes.node,
 };
 
 class FixtureSet extends React.Component {
@@ -11,7 +11,7 @@ class FixtureSet extends React.Component {
     const {title, description, children} = this.props;
 
     return (
-      <div>
+      <div className="container">
         <h1>{title}</h1>
         {description && <p>{description}</p>}
 

fixtures/dom/src/components/Header.js

@@ -35,11 +35,11 @@ class Header extends React.Component {
           <span className="header__logo">
             <img
               src={process.env.PUBLIC_URL + '/react-logo.svg'}
-              alt=""
-              width="32"
-              height="32"
+              alt="React"
+              width="20"
+              height="20"
             />
-            React Sandbox (v{React.version})
+            <a href="/">DOM Test Fixtures (v{React.version})</a>
           </span>
 
           <div className="header-controls">
@@ -48,7 +48,8 @@ class Header extends React.Component {
               <select
                 value={window.location.pathname}
                 onChange={this.handleFixtureChange}>
-                <option value="/">Select a Fixture</option>
+                <option value="/">Home</option>
+                <option value="/hydration">Hydration</option>
                 <option value="/range-inputs">Range Inputs</option>
                 <option value="/text-inputs">Text Inputs</option>
                 <option value="/number-inputs">Number Input</option>
@@ -64,6 +65,9 @@ class Header extends React.Component {
                 <option value="/event-pooling">Event Pooling</option>
                 <option value="/custom-elements">Custom Elements</option>
                 <option value="/media-events">Media Events</option>
+                <option value="/pointer-events">Pointer Events</option>
+                <option value="/mouse-events">Mouse Events</option>
+                <option value="/selection-events">Selection Events</option>
               </select>
             </label>
             <label htmlFor="react_version">

fixtures/dom/src/components/Iframe.js

@@ -0,0 +1,58 @@
+const React = window.React;
+const ReactDOM = window.ReactDOM;
+
+class IframePortal extends React.Component {
+  iframeRef = null;
+
+  handleRef = ref => {
+    if (ref !== this.iframeRef) {
+      this.iframeRef = ref;
+      if (ref) {
+        if (ref.contentDocument && this.props.head) {
+          ref.contentDocument.head.innerHTML = this.props.head;
+        }
+        // Re-render must take place in the next tick (Firefox)
+        setTimeout(() => {
+          this.forceUpdate();
+        });
+      }
+    }
+  };
+
+  render() {
+    const ref = this.iframeRef;
+    let portal = null;
+    if (ref && ref.contentDocument) {
+      portal = ReactDOM.createPortal(
+        this.props.children,
+        ref.contentDocument.body
+      );
+    }
+
+    return (
+      <div>
+        <iframe
+          title="Iframe portal"
+          style={{border: 'none', height: this.props.height}}
+          ref={this.handleRef}
+        />
+        {portal}
+      </div>
+    );
+  }
+}
+
+class IframeSubtree extends React.Component {
+  warned = false;
+  render() {
+    if (!this.warned) {
+      console.error(
+        `IFrame has not yet been implemented for React v${React.version}`
+      );
+      this.warned = true;
+    }
+    return <div>{this.props.children}</div>;
+  }
+}
+
+export default (ReactDOM.createPortal ? IframePortal : IframeSubtree);

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

@@ -10,7 +10,7 @@ function onButtonClick() {
 export default class ButtonTestCases extends React.Component {
   render() {
     return (
-      <FixtureSet title="Buttons" description="">
+      <FixtureSet title="Buttons">
         <TestCase
           title="onClick with disabled buttons"
           description="The onClick event handler should not be invoked when clicking on a disabled buyaton">

fixtures/dom/src/components/fixtures/date-inputs/index.js

@@ -8,7 +8,7 @@ const React = window.React;
 class DateInputFixtures extends React.Component {
   render() {
     return (
-      <FixtureSet title="Dates" description="">
+      <FixtureSet title="Dates">
         <TestCase title="Switching between date and datetime-local">
           <TestCase.Steps>
             <li>Type a date into the date picker</li>

fixtures/dom/src/components/fixtures/error-handling/index.js

@@ -7,9 +7,21 @@ const ReactDOM = window.ReactDOM;
 function BadRender(props) {
   props.doThrow();
 }
+
+class BadDidMount extends React.Component {
+  componentDidMount() {
+    this.props.doThrow();
+  }
+
+  render() {
+    return null;
+  }
+}
+
 class ErrorBoundary extends React.Component {
   static defaultProps = {
     buttonText: 'Trigger error',
+    badChildType: BadRender,
   };
   state = {
     shouldThrow: false,
@@ -33,7 +45,8 @@ class ErrorBoundary extends React.Component {
       }
     }
     if (this.state.shouldThrow) {
-      return <BadRender doThrow={this.props.doThrow} />;
+      const BadChild = this.props.badChildType;
+      return <BadChild doThrow={this.props.doThrow} />;
     }
     return <button onClick={this.triggerError}>{this.props.buttonText}</button>;
   }
@@ -84,10 +97,154 @@ class TriggerErrorAndCatch extends React.Component {
   }
 }
 
+function silenceWindowError(event) {
+  event.preventDefault();
+}
+
+class SilenceErrors extends React.Component {
+  state = {
+    silenceErrors: false,
+  };
+  componentDidMount() {
+    if (this.state.silenceErrors) {
+      window.addEventListener('error', silenceWindowError);
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    if (!prevState.silenceErrors && this.state.silenceErrors) {
+      window.addEventListener('error', silenceWindowError);
+    } else if (prevState.silenceErrors && !this.state.silenceErrors) {
+      window.removeEventListener('error', silenceWindowError);
+    }
+  }
+  componentWillUnmount() {
+    if (this.state.silenceErrors) {
+      window.removeEventListener('error', silenceWindowError);
+    }
+  }
+  render() {
+    return (
+      <div>
+        <label>
+          <input
+            type="checkbox"
+            value={this.state.silenceErrors}
+            onChange={() =>
+              this.setState(state => ({
+                silenceErrors: !state.silenceErrors,
+              }))
+            }
+          />
+          Silence errors
+        </label>
+        {this.state.silenceErrors && (
+          <div>
+            {this.props.children}
+            <br />
+            <hr />
+            <b style={{color: 'red'}}>
+              Don't forget to uncheck "Silence errors" when you're done with
+              this test!
+            </b>
+          </div>
+        )}
+      </div>
+    );
+  }
+}
+class GetEventTypeDuringUpdate extends React.Component {
+  state = {};
+
+  onClick = () => {
+    this.expectUpdate = true;
+    this.forceUpdate();
+  };
+
+  componentDidUpdate() {
+    if (this.expectUpdate) {
+      this.expectUpdate = false;
+      this.setState({eventType: window.event.type});
+      setTimeout(() => {
+        this.setState({cleared: !window.event});
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className="test-fixture">
+        <button onClick={this.onClick}>Trigger callback in event.</button>
+        {this.state.eventType ? (
+          <p>
+            Got <b>{this.state.eventType}</b> event.
+          </p>
+        ) : (
+          <p>Got no event</p>
+        )}
+        {this.state.cleared ? (
+          <p>Event cleared correctly.</p>
+        ) : (
+          <p>Event failed to clear.</p>
+        )}
+      </div>
+    );
+  }
+}
+
+class SilenceRecoverableError extends React.Component {
+  render() {
+    return (
+      <SilenceErrors>
+        <ErrorBoundary
+          badChildType={BadRender}
+          buttonText={'Throw (render phase)'}
+          doThrow={() => {
+            throw new Error('Silenced error (render phase)');
+          }}
+        />
+        <ErrorBoundary
+          badChildType={BadDidMount}
+          buttonText={'Throw (commit phase)'}
+          doThrow={() => {
+            throw new Error('Silenced error (commit phase)');
+          }}
+        />
+      </SilenceErrors>
+    );
+  }
+}
+
+class TrySilenceFatalError extends React.Component {
+  container = document.createElement('div');
+
+  triggerErrorAndCatch = () => {
+    try {
+      ReactDOM.flushSync(() => {
+        ReactDOM.render(
+          <BadRender
+            doThrow={() => {
+              throw new Error('Caught error');
+            }}
+          />,
+          this.container
+        );
+      });
+    } catch (e) {}
+  };
+
+  render() {
+    return (
+      <SilenceErrors>
+        <button onClick={this.triggerErrorAndCatch}>Throw fatal error</button>
+      </SilenceErrors>
+    );
+  }
+}
+
 export default class ErrorHandlingTestCases extends React.Component {
   render() {
     return (
-      <FixtureSet title="Error handling" description="">
+      <FixtureSet title="Error handling">
         <TestCase
           title="Break on uncaught exceptions"
           description="In DEV, errors should be treated as uncaught, even though React catches them internally">
@@ -103,6 +260,12 @@ export default class ErrorHandlingTestCases extends React.Component {
             the BadRender component. After resuming, the "Trigger error" button
             should be replaced with "Captured an error: Oops!" Clicking reset
             should reset the test case.
+            <br />
+            <br />
+            In the console, you should see <b>two</b> messages: the actual error
+            ("Oops") printed natively by the browser with its JavaScript stack,
+            and our addendum ("The above error occurred in BadRender component")
+            with a React component stack.
           </TestCase.ExpectedResult>
           <Example
             doThrow={() => {
@@ -155,10 +318,59 @@ export default class ErrorHandlingTestCases extends React.Component {
           </TestCase.Steps>
           <TestCase.ExpectedResult>
             Open the console. "Uncaught Error: Caught error" should have been
-            logged by the browser.
+            logged by the browser. You should also see our addendum ("The above
+            error...").
           </TestCase.ExpectedResult>
           <TriggerErrorAndCatch />
         </TestCase>
+        <TestCase
+          title="Recoverable errors can be silenced with preventDefault (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Check the "Silence errors" checkbox below</li>
+            <li>Click the "Throw (render phase)" button</li>
+            <li>Click the "Throw (commit phase)" button</li>
+            <li>Uncheck the "Silence errors" checkbox</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. You shouldn't see <b>any</b> messages in the
+            console: neither the browser error, nor our "The above error"
+            addendum, from either of the buttons. The buttons themselves should
+            get replaced by two labels: "Captured an error: Silenced error
+            (render phase)" and "Captured an error: Silenced error (commit
+            phase)".
+          </TestCase.ExpectedResult>
+          <SilenceRecoverableError />
+        </TestCase>
+        <TestCase
+          title="Fatal errors cannot be silenced with preventDefault (development mode only)"
+          description="">
+          <TestCase.Steps>
+            <li>Check the "Silence errors" checkbox below</li>
+            <li>Click the "Throw fatal error" button</li>
+            <li>Uncheck the "Silence errors" checkbox</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Open the console. "Error: Caught error" should have been logged by
+            React. You should also see our addendum ("The above error...").
+          </TestCase.ExpectedResult>
+          <TrySilenceFatalError />
+        </TestCase>
+
+        {window.hasOwnProperty('event') ? (
+          <TestCase
+            title="Error handling does not interfere with window.event"
+            description="">
+            <TestCase.Steps>
+              <li>Click the "Trigger callback in event" button</li>
+            </TestCase.Steps>
+            <TestCase.ExpectedResult>
+              You should see "Got <b>click</b> event" and "Event cleared
+              successfully" below.
+            </TestCase.ExpectedResult>
+            <GetEventTypeDuringUpdate />
+          </TestCase>
+        ) : null}
       </FixtureSet>
     );
   }

fixtures/dom/src/components/fixtures/event-pooling/index.js

@@ -7,7 +7,7 @@ const React = window.React;
 class EventPooling extends React.Component {
   render() {
     return (
-      <FixtureSet title="Event Pooling" description="">
+      <FixtureSet title="Event Pooling">
         <MouseMove />
         <Persistence />
       </FixtureSet>

fixtures/dom/src/components/fixtures/home.js

@@ -0,0 +1,117 @@
+const React = window.React;
+
+export default function Home() {
+  return (
+    <main className="container">
+      <h1>DOM Test Fixtures</h1>
+      <p>
+        Use this site to test browser quirks and other behavior that can not be
+        captured through unit tests.
+      </p>
+      <section>
+        <h2>Tested Browsers</h2>
+        <table>
+          <thead>
+            <tr>
+              <th>Browser</th>
+              <th>Versions</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Chrome - Desktop</td>
+              <td>
+                49<sup>*</sup>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Chrome - Android</td>
+              <td>Latest</td>
+            </tr>
+            <tr>
+              <td>Firefox Desktop</td>
+              <td>
+                <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                  ESR<sup>†</sup>
+                </a>, Latest
+              </td>
+            </tr>
+            <tr>
+              <td>Internet Explorer</td>
+              <td>9, 10, 11</td>
+            </tr>
+            <tr>
+              <td>Microsoft Edge</td>
+              <td>14, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - Desktop</td>
+              <td>7, Latest</td>
+            </tr>
+            <tr>
+              <td>Safari - iOS</td>
+              <td>7, Latest</td>
+            </tr>
+          </tbody>
+        </table>
+        <footer>
+          <small>* Chrome 49 is the last release for Windows XP.</small>
+          <br />
+          <small>
+            † Firefox Extended Support Release (ESR) is used by many
+            institutions.
+          </small>
+        </footer>
+      </section>
+      <section>
+        <h2>How do I test browsers I don't have access to?</h2>
+        <p>
+          Getting test coverage across all of these browsers can be difficult,
+          particularly for older versions of evergreen browsers. Fortunately
+          there are a handful of tools that make browser testing easy.
+        </p>
+        <section>
+          <h3>Paid services</h3>
+          <ul>
+            <li>
+              <a href="https://browserstack.com">BrowserStack</a>
+            </li>
+            <li>
+              <a href="https://saucelabs.com">Sauce Labs</a>
+            </li>
+            <li>
+              <a href="https://crossbrowsertesting.com/">CrossBrowserTesting</a>
+            </li>
+          </ul>
+          <p>
+            These services provide access to all browsers we test, however they
+            cost money. There is no obligation to pay for them. Maintainers have
+            access to a BrowserStack subscription; feel free to contact a
+            maintainer or mention browsers where extra testing is required.
+          </p>
+        </section>
+        <section>
+          <h3>Browser downloads</h3>
+          <p>A handful of browsers are available for download directly:</p>
+          <ul>
+            <li>
+              <a href="https://developer.microsoft.com/en-us/microsoft-edge/tools/vms/">
+                Internet Explorer (9-11) and MS Edge virtual machines
+              </a>
+            </li>
+            <li>
+              <a href="https://www.chromium.org/getting-involved/download-chromium#TOC-Downloading-old-builds-of-Chrome-Chromium">
+                Chromium snapshots (for older versions of Chrome)
+              </a>
+            </li>
+            <li>
+              <a href="https://www.mozilla.org/en-US/firefox/organizations/">
+                Firefox Extended Support Release (ESR)
+              </a>
+            </li>
+          </ul>
+        </section>
+      </section>
+    </main>
+  );
+}

fixtures/dom/src/components/fixtures/hydration/Code.js

@@ -0,0 +1,85 @@
+const React = window.React;
+
+export class CodeEditor extends React.Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+
+  componentDidMount() {
+    // Important: CodeMirror incorrectly lays out the editor
+    // if it executes before CSS has loaded
+    // https://github.com/graphql/graphiql/issues/33#issuecomment-318188555
+    Promise.all([
+      import('codemirror'),
+      import('codemirror/mode/jsx/jsx'),
+      import('codemirror/lib/codemirror.css'),
+      import('./codemirror-paraiso-dark.css'),
+    ]).then(([CodeMirror]) => this.install(CodeMirror));
+  }
+
+  install(CodeMirror) {
+    if (!this.textarea) {
+      return;
+    }
+
+    const {onChange} = this.props;
+
+    this.editor = CodeMirror.fromTextArea(this.textarea, {
+      mode: 'jsx',
+      theme: 'paraiso-dark',
+      lineNumbers: true,
+    });
+
+    this.editor.on('change', function(doc) {
+      onChange(doc.getValue());
+    });
+  }
+
+  componentWillUnmount() {
+    if (this.editor) {
+      this.editor.toTextArea();
+    }
+  }
+
+  render() {
+    return (
+      <textarea
+        ref={ref => (this.textarea = ref)}
+        defaultValue={this.props.code}
+        autoComplete="off"
+        hidden={true}
+      />
+    );
+  }
+}
+
+/**
+ * Prevent IE9 from raising an error on an unrecognized element:
+ * See https://github.com/facebook/react/issues/13610
+ */
+const supportsDetails = !(
+  document.createElement('details') instanceof HTMLUnknownElement
+);
+
+export class CodeError extends React.Component {
+  render() {
+    const {error, className} = this.props;
+
+    if (!error) {
+      return null;
+    }
+
+    if (supportsDetails) {
+      const [summary, ...body] = error.message.split(/\n+/g);
+
+      return (
+        <details className={className}>
+          <summary>{summary}</summary>
+          {body.join('\n')}
+        </details>
+      );
+    }
+
+    return <div className={className}>{error.message}</div>;
+  }
+}

fixtures/dom/src/components/fixtures/hydration/code-transformer.js

@@ -0,0 +1,18 @@
+/**
+ * Babel works across all browsers, however it requires many polyfills.
+ */
+
+import 'core-js/es6/weak-map';
+import 'core-js/es6/weak-set';
+import 'core-js/es6/number';
+import 'core-js/es6/string';
+import 'core-js/es6/array';
+import 'core-js/modules/es6.object.set-prototype-of';
+
+import {transform} from '@babel/standalone';
+
+const presets = ['es2015', 'stage-3', 'react'];
+
+export function compile(raw) {
+  return transform(raw, {presets}).code;
+}

fixtures/dom/src/components/fixtures/hydration/codemirror-paraiso-dark.css

@@ -0,0 +1,38 @@
+/**
+ * Name:       Paraíso (Dark)
+ * Author:     Jan T. Sott
+ * License:    Creative Commons Attribution-ShareAlike 4.0 Unported License.
+ *             https://creativecommons.org/licenses/by-sa/4.0/deed.en_US
+ *
+ * Color scheme by Jan T. Sott (https://github.com/idleberg/Paraiso-CodeMirror)
+ * Inspired by the art of Rubens LP (http://www.rubenslp.com.br)
+ */
+
+.cm-s-paraiso-dark.CodeMirror { background: #2f1e2e; color: #b9b6b0; }
+.cm-s-paraiso-dark div.CodeMirror-selected { background: #41323f; }
+.cm-s-paraiso-dark .CodeMirror-line::selection, .cm-s-paraiso-dark .CodeMirror-line > span::selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::selection { background: rgba(65, 50, 63, .99); }
+.cm-s-paraiso-dark .CodeMirror-line::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span::-moz-selection, .cm-s-paraiso-dark .CodeMirror-line > span > span::-moz-selection { background: rgba(65, 50, 63, .99); }
+.cm-s-paraiso-dark .CodeMirror-gutters { background: #2f1e2e; border-right: 0px; }
+.cm-s-paraiso-dark .CodeMirror-guttermarker { color: #ef6155; }
+.cm-s-paraiso-dark .CodeMirror-guttermarker-subtle { color: #776e71; }
+.cm-s-paraiso-dark .CodeMirror-linenumber { color: #776e71; }
+.cm-s-paraiso-dark .CodeMirror-cursor { border-left: 1px solid #8d8687; }
+
+.cm-s-paraiso-dark span.cm-comment { color: #e96ba8; }
+.cm-s-paraiso-dark span.cm-atom { color: #815ba4; }
+.cm-s-paraiso-dark span.cm-number { color: #815ba4; }
+
+.cm-s-paraiso-dark span.cm-property, .cm-s-paraiso-dark span.cm-attribute { color: #48b685; }
+.cm-s-paraiso-dark span.cm-keyword { color: #ef6155; }
+.cm-s-paraiso-dark span.cm-string { color: #fec418; }
+
+.cm-s-paraiso-dark span.cm-variable { color: #48b685; }
+.cm-s-paraiso-dark span.cm-variable-2 { color: #06b6ef; }
+.cm-s-paraiso-dark span.cm-def { color: #f99b15; }
+.cm-s-paraiso-dark span.cm-bracket { color: #b9b6b0; }
+.cm-s-paraiso-dark span.cm-tag { color: #ef6155; }
+.cm-s-paraiso-dark span.cm-link { color: #815ba4; }
+.cm-s-paraiso-dark span.cm-error { background: #ef6155; color: #8d8687; }
+
+.cm-s-paraiso-dark .CodeMirror-activeline-background { background: #4D344A; }
+.cm-s-paraiso-dark .CodeMirror-matchingbracket { text-decoration: underline; color: white !important; }

fixtures/dom/src/components/fixtures/hydration/data.js

@@ -0,0 +1,22 @@
+export const SAMPLE_CODE = `
+class Fixture extends React.Component {
+  state = {
+    value: 'asdf'
+  }
+
+  onChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  render() {
+    const { value } = this.state;
+
+    return (
+      <form>
+        <input value={value} onChange={this.onChange.bind(this)} />
+        <p>Value: {value}</p>
+      </form>
+    );
+  }
+}
+`.trim();

fixtures/dom/src/components/fixtures/hydration/hydration.css

@@ -0,0 +1,68 @@
+.hydration {
+  background: #2f1e2e;
+  margin: 0;
+  position: relative;
+  height: calc(100vh - 40px); /* height of header */
+  overflow: auto;
+  padding-top: 32px;
+}
+
+.hydration-options {
+  background: #171717;
+  border-top: 1px dashed rgba(215, 235, 255, 0.12);
+  color: #def5ff;
+  height: 32px;
+  line-height: 28px;
+  padding: 0 8px;
+  width: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.hydration-options label {
+  font-size: 13px;
+}
+
+.hydration-options input[type=checkbox] {
+  display: inline-block;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.hydration .CodeMirror {
+  font-size: 13px;
+  padding-top: 8px;
+  padding-bottom: 68px;
+  height: calc(100vh - 72px);
+  width: 55%;
+}
+
+.hydration-sandbox {
+  background: white;
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.54);
+  height: calc(100% - 34px);
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: calc(45% - 24px);
+}
+
+.hydration-code-error {
+  background: #df3f3f;
+  border-radius: 2px;
+  bottom: 18px;
+  color: white;
+  font-family: monospace;
+  font-size: 13px;
+  left: 16px;
+  line-height: 1.25;
+  overflow: auto;
+  padding: 12px;
+  position: fixed;
+  white-space: pre;
+  max-width: calc(55% - 26px);
+  z-index: 10;
+}

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

@@ -0,0 +1,109 @@
+import './hydration.css';
+import {SAMPLE_CODE} from './data';
+import {CodeEditor, CodeError} from './Code';
+import {compile} from './code-transformer';
+import {reactPaths} from '../../../react-loader';
+import qs from 'query-string';
+
+const React = window.React;
+
+class Hydration extends React.Component {
+  state = {
+    error: null,
+    code: SAMPLE_CODE,
+    hydrate: true,
+  };
+
+  ready = false;
+
+  componentDidMount() {
+    window.addEventListener('message', this.handleMessage);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener('message', this.handleMessage);
+  }
+
+  handleMessage = event => {
+    var data = JSON.parse(event.data);
+
+    switch (data.type) {
+      case 'ready':
+        this.ready = true;
+        this.injectCode();
+        break;
+      default:
+        throw new Error(
+          'Editor Error: Unrecognized message "' + data.type + '"'
+        );
+    }
+  };
+
+  injectCode = () => {
+    try {
+      this.send({
+        type: 'code',
+        payload: compile(this.state.code),
+      });
+
+      this.setState({error: null});
+    } catch (error) {
+      this.setState({error});
+    }
+  };
+
+  send = message => {
+    if (this.ready) {
+      this.frame.contentWindow.postMessage(JSON.stringify(message), '*');
+    }
+  };
+
+  setFrame = frame => {
+    this.frame = frame;
+  };
+
+  setCode = code => {
+    this.setState({code}, this.injectCode);
+  };
+
+  setCheckbox = event => {
+    this.setState({
+      [event.target.name]: event.target.checked,
+    });
+  };
+
+  render() {
+    const {code, error, hydrate} = this.state;
+    const src = '/renderer.html?' + qs.stringify({hydrate, ...reactPaths()});
+
+    return (
+      <div className="hydration">
+        <header className="hydration-options">
+          <label htmlFor="hydrate">
+            <input
+              id="hydrate"
+              name="hydrate"
+              type="checkbox"
+              checked={hydrate}
+              onChange={this.setCheckbox}
+            />
+            Auto-Hydrate
+          </label>
+        </header>
+
+        <CodeEditor code={code} onChange={this.setCode} />
+
+        <CodeError error={error} className="hydration-code-error" />
+
+        <iframe
+          ref={this.setFrame}
+          className="hydration-sandbox"
+          title="Hydration Preview"
+          src={src}
+        />
+      </div>
+    );
+  }
+}
+
+export default Hydration;

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

@@ -1,54 +1,62 @@
-import RangeInputFixtures from './range-inputs';
-import TextInputFixtures from './text-inputs';
-import SelectFixtures from './selects';
-import TextAreaFixtures from './textareas';
-import InputChangeEvents from './input-change-events';
-import NumberInputFixtures from './number-inputs';
-import PasswordInputFixtures from './password-inputs';
-import ButtonFixtures from './buttons';
-import DateInputFixtures from './date-inputs';
-import ErrorHandling from './error-handling';
-import EventPooling from './event-pooling';
-import CustomElementFixtures from './custom-elements';
-import MediaEventsFixtures from './media-events';
-
 const React = window.React;
+const fixturePath = window.location.pathname;
 
 /**
  * A simple routing component that renders the appropriate
  * fixture based on the location pathname.
  */
-function FixturesPage() {
-  switch (window.location.pathname) {
-    case '/text-inputs':
-      return <TextInputFixtures />;
-    case '/range-inputs':
-      return <RangeInputFixtures />;
-    case '/selects':
-      return <SelectFixtures />;
-    case '/textareas':
-      return <TextAreaFixtures />;
-    case '/input-change-events':
-      return <InputChangeEvents />;
-    case '/number-inputs':
-      return <NumberInputFixtures />;
-    case '/password-inputs':
-      return <PasswordInputFixtures />;
-    case '/buttons':
-      return <ButtonFixtures />;
-    case '/date-inputs':
-      return <DateInputFixtures />;
-    case '/error-handling':
-      return <ErrorHandling />;
-    case '/event-pooling':
-      return <EventPooling />;
-    case '/custom-elements':
-      return <CustomElementFixtures />;
-    case '/media-events':
-      return <MediaEventsFixtures />;
-    default:
-      return <p>Please select a test fixture.</p>;
+class FixturesPage extends React.Component {
+  static defaultProps = {
+    fixturePath: fixturePath === '/' ? '/home' : fixturePath,
+  };
+
+  state = {
+    isLoading: true,
+    error: null,
+    Fixture: null,
+  };
+
+  componentDidMount() {
+    this.loadFixture();
+  }
+
+  async loadFixture() {
+    const {fixturePath} = this.props;
+
+    try {
+      const module = await import(`.${fixturePath}`);
+
+      this.setState({Fixture: module.default});
+    } catch (error) {
+      console.error(error);
+      this.setState({error});
+    } finally {
+      this.setState({isLoading: false});
+    }
+  }
+
+  render() {
+    const {Fixture, error, isLoading} = this.state;
+
+    if (isLoading) {
+      return null;
+    }
+
+    if (error) {
+      return <FixtureError error={error} />;
+    }
+
+    return <Fixture />;
   }
 }
 
+function FixtureError({error}) {
+  return (
+    <section>
+      <h2>Error loading fixture</h2>
+      <p>{error.message}</p>
+    </section>
+  );
+}
+
 export default FixturesPage;

fixtures/dom/src/components/fixtures/media-events/index.js

@@ -60,7 +60,7 @@ export default class MediaEvents extends React.Component {
     }, {});
 
     return (
-      <FixtureSet title="Media Events" description="">
+      <FixtureSet title="Media Events">
         <TestCase
           title="Event bubbling"
           description="Media events should synthetically bubble">

fixtures/dom/src/components/fixtures/mouse-events/index.js

@@ -0,0 +1,16 @@
+import FixtureSet from '../../FixtureSet';
+import MouseMovement from './mouse-movement';
+
+const React = window.React;
+
+class MouseEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet title="Mouse Events">
+        <MouseMovement />
+      </FixtureSet>
+    );
+  }
+}
+
+export default MouseEvents;

fixtures/dom/src/components/fixtures/mouse-events/mouse-movement.js

@@ -0,0 +1,48 @@
+import TestCase from '../../TestCase';
+
+const React = window.React;
+
+class MouseMovement extends React.Component {
+  state = {
+    movement: {x: 0, y: 0},
+  };
+
+  onMove = event => {
+    this.setState({x: event.movementX, y: event.movementY});
+  };
+
+  render() {
+    const {x, y} = this.state;
+
+    const boxStyle = {
+      padding: '10px 20px',
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+    };
+
+    return (
+      <TestCase
+        title="Mouse Movement"
+        description="We polyfill the movementX and movementY fields."
+        affectedBrowsers="IE, Safari">
+        <TestCase.Steps>
+          <li>Mouse over the box below</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          The reported values should equal the pixel (integer) difference
+          between mouse movements positions.
+        </TestCase.ExpectedResult>
+
+        <div style={boxStyle} onMouseMove={this.onMove}>
+          <p>Trace your mouse over this box.</p>
+          <p>
+            Last movement: {x},{y}
+          </p>
+        </div>
+      </TestCase>
+    );
+  }
+}
+
+export default MouseMovement;

fixtures/dom/src/components/fixtures/password-inputs/index.js

@@ -6,7 +6,7 @@ const React = window.React;
 
 function NumberInputs() {
   return (
-    <FixtureSet title="Password inputs" description="">
+    <FixtureSet title="Password inputs">
       <TestCase
         title="The show password icon"
         description={`
@@ -15,7 +15,7 @@ function NumberInputs() {
         `}
         affectedBrowsers="IE Edge, IE 11">
         <TestCase.Steps>
-          <li>Type any string (not an actual password</li>
+          <li>Type any string (not an actual password)</li>
         </TestCase.Steps>
 
         <TestCase.ExpectedResult>

fixtures/dom/src/components/fixtures/pointer-events/drag-box.js

@@ -0,0 +1,90 @@
+const React = window.React;
+
+const CIRCLE_SIZE = 80;
+
+class DragBox extends React.Component {
+  state = {
+    hasCapture: false,
+    circleLeft: 80,
+    circleTop: 80,
+  };
+  isDragging = false;
+  previousLeft = 0;
+  previousTop = 0;
+
+  onDown = event => {
+    this.isDragging = true;
+    event.target.setPointerCapture(event.pointerId);
+
+    // We store the initial coordinates to be able to calculate the changes
+    // later on.
+    this.extractPositionDelta(event);
+  };
+
+  onMove = event => {
+    if (!this.isDragging) {
+      return;
+    }
+    const {left, top} = this.extractPositionDelta(event);
+
+    this.setState(({circleLeft, circleTop}) => ({
+      circleLeft: circleLeft + left,
+      circleTop: circleTop + top,
+    }));
+  };
+
+  onUp = event => (this.isDragging = false);
+  onGotCapture = event => this.setState({hasCapture: true});
+  onLostCapture = event => this.setState({hasCapture: false});
+
+  extractPositionDelta = event => {
+    const left = event.pageX;
+    const top = event.pageY;
+    const delta = {
+      left: left - this.previousLeft,
+      top: top - this.previousTop,
+    };
+    this.previousLeft = left;
+    this.previousTop = top;
+    return delta;
+  };
+
+  render() {
+    const {hasCapture, circleLeft, circleTop} = this.state;
+
+    const boxStyle = {
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+      minHeight: 400,
+      width: '100%',
+      position: 'relative',
+    };
+
+    const circleStyle = {
+      width: CIRCLE_SIZE,
+      height: CIRCLE_SIZE,
+      borderRadius: CIRCLE_SIZE / 2,
+      position: 'absolute',
+      left: circleLeft,
+      top: circleTop,
+      backgroundColor: hasCapture ? 'blue' : 'green',
+      touchAction: 'none',
+    };
+
+    return (
+      <div style={boxStyle}>
+        <div
+          style={circleStyle}
+          onPointerDown={this.onDown}
+          onPointerMove={this.onMove}
+          onPointerUp={this.onUp}
+          onPointerCancel={this.onUp}
+          onGotPointerCapture={this.onGotCapture}
+          onLostPointerCapture={this.onLostCapture}
+        />
+      </div>
+    );
+  }
+}
+
+export default DragBox;

fixtures/dom/src/components/fixtures/pointer-events/drag.js

@@ -0,0 +1,25 @@
+import TestCase from '../../TestCase';
+import DragBox from './drag-box';
+
+const React = window.React;
+
+class Drag extends React.Component {
+  render() {
+    return (
+      <TestCase title="Drag" description="">
+        <TestCase.Steps>
+          <li>Drag the circle below with any pointer tool</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          While dragging, the circle must have turn blue to indicate that a
+          pointer capture was received.
+        </TestCase.ExpectedResult>
+
+        <DragBox />
+      </TestCase>
+    );
+  }
+}
+
+export default Drag;

fixtures/dom/src/components/fixtures/pointer-events/hover-box.js

@@ -0,0 +1,34 @@
+const React = window.React;
+
+class DrawBox extends React.Component {
+  render() {
+    const boxStyle = {
+      border: '1px solid #d9d9d9',
+      margin: '10px 0 20px',
+      padding: '20px 20px',
+      touchAction: 'none',
+    };
+
+    const obstacleStyle = {
+      border: '1px solid #d9d9d9',
+      width: '25%',
+      height: '200px',
+      margin: '12.5%',
+      display: 'inline-block',
+    };
+
+    return (
+      <div
+        style={boxStyle}
+        onPointerOver={this.props.onOver}
+        onPointerOut={this.props.onOut}
+        onPointerEnter={this.props.onEnter}
+        onPointerLeave={this.props.onLeave}>
+        <div style={obstacleStyle} />
+        <div style={obstacleStyle} />
+      </div>
+    );
+  }
+}
+
+export default DrawBox;

fixtures/dom/src/components/fixtures/pointer-events/hover.js

@@ -0,0 +1,51 @@
+import TestCase from '../../TestCase';
+import HoverBox from './hover-box';
+
+const React = window.React;
+
+class Hover extends React.Component {
+  state = {
+    overs: 0,
+    outs: 0,
+    enters: 0,
+    leaves: 0,
+  };
+
+  onOver = () => this.setState({overs: this.state.overs + 1});
+  onOut = () => this.setState({outs: this.state.outs + 1});
+  onEnter = () => this.setState({enters: this.state.enters + 1});
+  onLeave = () => this.setState({leaves: this.state.leaves + 1});
+
+  render() {
+    const {overs, outs, enters, leaves} = this.state;
+
+    return (
+      <TestCase title="Hover" description="">
+        <TestCase.Steps>
+          <li>Hover over the above box and the obstacles</li>
+        </TestCase.Steps>
+
+        <TestCase.ExpectedResult>
+          Overs and outs should increase when moving over the obstacles but
+          enters and leaves should not.
+        </TestCase.ExpectedResult>
+
+        <HoverBox
+          onOver={this.onOver}
+          onOut={this.onOut}
+          onEnter={this.onEnter}
+          onLeave={this.onLeave}
+        />
+
+        <p>
+          Pointer Overs: <b>{overs}</b> <br />
+          Pointer Outs: <b>{outs}</b> <br />
+          Pointer Enters: <b>{enters}</b> <br />
+          Pointer Leaves: <b>{leaves}</b> <br />
+        </p>
+      </TestCase>
+    );
+  }
+}
+
+export default Hover;

fixtures/dom/src/components/fixtures/pointer-events/index.js

@@ -0,0 +1,20 @@
+import FixtureSet from '../../FixtureSet';
+import Drag from './drag';
+import Hover from './hover';
+
+const React = window.React;
+
+class PointerEvents extends React.Component {
+  render() {
+    return (
+      <FixtureSet
+        title="Pointer Events"
+        description="Pointer Events are not supported in every browser. The examples below might not work in every browser. To test pointer events, make sure to use Google Chrome, Firefox, Internet Explorer, or Edge.">
+        <Drag />
+        <Hover />
+      </FixtureSet>
+    );
+  }
+}
+
+export default PointerEvents;

fixtures/dom/src/components/fixtures/range-inputs/index.js

@@ -1,3 +1,5 @@
+import FixtureSet from '../../FixtureSet';
+
 const React = window.React;
 
 class RangeInputs extends React.Component {
@@ -7,22 +9,26 @@ class RangeInputs extends React.Component {
   };
   render() {
     return (
-      <form>
-        <fieldset>
-          <legend>Controlled</legend>
-          <input
-            type="range"
-            value={this.state.value}
-            onChange={this.onChange}
-          />
-          <span className="hint">Value: {this.state.value}</span>
-        </fieldset>
+      <FixtureSet
+        title="Range Inputs"
+        description="Note: Range inputs are not supported in IE9.">
+        <form>
+          <fieldset>
+            <legend>Controlled</legend>
+            <input
+              type="range"
+              value={this.state.value}
+              onChange={this.onChange}
+            />
+            <span className="hint">Value: {this.state.value}</span>
+          </fieldset>
 
-        <fieldset>
-          <legend>Uncontrolled</legend>
-          <input type="range" defaultValue={0.5} />
-        </fieldset>
-      </form>
+          <fieldset>
+            <legend>Uncontrolled</legend>
+            <input type="range" defaultValue={0.5} />
+          </fieldset>
+        </form>
+      </FixtureSet>
     );
   }
 }

fixtures/dom/src/components/fixtures/selection-events/OnSelectEventTestCase.js

@@ -0,0 +1,50 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+
+class OnSelectIframe extends React.Component {
+  state = {count: 0, value: 'Select Me!'};
+
+  _onSelect = event => {
+    this.setState(({count}) => ({count: count + 1}));
+  };
+
+  _onChange = event => {
+    this.setState({value: event.target.value});
+  };
+
+  render() {
+    const {count, value} = this.state;
+    return (
+      <Iframe height={60}>
+        Selection Event Count: {count}
+        <input
+          type="text"
+          onSelect={this._onSelect}
+          value={value}
+          onChange={this._onChange}
+        />
+      </Iframe>
+    );
+  }
+}
+
+export default class OnSelectEventTestCase extends React.Component {
+  render() {
+    return (
+      <TestCase
+        title="onSelect events within iframes"
+        description="onSelect events should fire for elements rendered inside iframes">
+        <TestCase.Steps>
+          <li>Highlight some of the text in the input below</li>
+          <li>Move the cursor around using the arrow keys</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The displayed count should increase as you highlight or move the
+          cursor
+        </TestCase.ExpectedResult>
+        <OnSelectIframe />
+      </TestCase>
+    );
+  }
+}

fixtures/dom/src/components/fixtures/selection-events/ReorderedInputsTestCase.js

@@ -0,0 +1,44 @@
+import TestCase from '../../TestCase';
+import Iframe from '../../Iframe';
+const React = window.React;
+
+export default class ReorderedInputsTestCase extends React.Component {
+  state = {count: 0};
+
+  componentDidMount() {
+    this.interval = setInterval(() => {
+      this.setState({count: this.state.count + 1});
+    }, 2000);
+  }
+
+  componentWillUnmount() {
+    clearInterval(this.interval);
+  }
+
+  renderInputs() {
+    const inputs = [
+      <input key={1} defaultValue="Foo" />,
+      <input key={2} defaultValue="Bar" />,
+    ];
+    if (this.state.count % 2 === 0) {
+      inputs.reverse();
+    }
+    return inputs;
+  }
+
+  render() {
+    return (
+      <TestCase title="Reordered input elements in iframes" description="">
+        <TestCase.Steps>
+          <li>The two inputs below swap positions every two seconds</li>
+          <li>Select the text in either of them</li>
+          <li>Wait for the swap to occur</li>
+        </TestCase.Steps>
+        <TestCase.ExpectedResult>
+          The selection you made should be maintained
+        </TestCase.ExpectedResult>
+        <Iframe height={50}>{this.renderInputs()}</Iframe>
+      </TestCase>
+    );
+  }
+}

fixtures/dom/src/components/fixtures/selection-events/index.js

@@ -0,0 +1,19 @@
+import FixtureSet from '../../FixtureSet';
+import ReorderedInputsTestCase from './ReorderedInputsTestCase';
+import OnSelectEventTestCase from './OnSelectEventTestCase';
+const React = window.React;
+
+export default function SelectionEvents() {
+  return (
+    <FixtureSet
+      title="Selection Restoration"
+      description="
+      When React commits changes it may perform operations which cause existing
+      selection state to be lost. This is manually managed by reading the
+      selection state before commits and then restoring it afterwards.
+      ">
+      <ReorderedInputsTestCase />
+      <OnSelectEventTestCase />
+    </FixtureSet>
+  );
+}

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

@@ -46,7 +46,7 @@ class SelectFixture extends React.Component {
 
   render() {
     return (
-      <FixtureSet title="Selects" description="">
+      <FixtureSet title="Selects">
         <form className="field-group">
           <fieldset>
             <legend>Controlled</legend>
@@ -158,6 +158,50 @@ class SelectFixture extends React.Component {
             </form>
           </div>
         </TestCase>
+
+        <TestCase title="A multiple select being scrolled to first selected option">
+          <TestCase.ExpectedResult>
+            First selected option should be visible
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <form>
+              <select multiple defaultValue={['tiger']}>
+                <option value="gorilla">gorilla</option>
+                <option value="giraffe">giraffe</option>
+                <option value="monkey">monkey</option>
+                <option value="lion">lion</option>
+                <option value="mongoose">mongoose</option>
+                <option value="tiger">tiget</option>
+              </select>
+            </form>
+          </div>
+        </TestCase>
+
+        <TestCase
+          title="An option which contains conditional render fails"
+          relatedIssues="11911">
+          <TestCase.Steps>
+            <li>Select any option</li>
+          </TestCase.Steps>
+          <TestCase.ExpectedResult>
+            Option should be set
+          </TestCase.ExpectedResult>
+
+          <div className="test-fixture">
+            <select value={this.state.value} onChange={this.onChange}>
+              <option value="red">
+                red {this.state.value === 'red' && 'is chosen '} TextNode
+              </option>
+              <option value="blue">
+                blue {this.state.value === 'blue' && 'is chosen '} TextNode
+              </option>
+              <option value="green">
+                green {this.state.value === 'green' && 'is chosen '} TextNode
+              </option>
+            </select>
+          </div>
+        </TestCase>
       </FixtureSet>
     );
   }

fixtures/dom/src/components/fixtures/text-inputs/ReplaceEmailInput.js

@@ -0,0 +1,40 @@
+import Fixture from '../../Fixture';
+
+const React = window.React;
+
+class ReplaceEmailInput extends React.Component {
+  state = {
+    formSubmitted: false,
+  };
+
+  onReset = () => {
+    this.setState({formSubmitted: false});
+  };
+
+  onSubmit = event => {
+    event.preventDefault();
+    this.setState({formSubmitted: true});
+  };
+
+  render() {
+    return (
+      <Fixture>
+        <form className="control-box" onSubmit={this.onSubmit}>
+          <fieldset>
+            <legend>Email</legend>
+            {!this.state.formSubmitted ? (
+              <input type="email" />
+            ) : (
+              <input type="text" disabled={true} />
+            )}
+          </fieldset>
+        </form>
+        <button type="button" onClick={this.onReset}>
+          Reset
+        </button>
+      </Fixture>
+    );
+  }
+}
+
+export default ReplaceEmailInput;

fixtures/dom/src/components/fixtures/text-inputs/index.js

@@ -2,6 +2,7 @@ import Fixture from '../../Fixture';
 import FixtureSet from '../../FixtureSet';
 import TestCase from '../../TestCase';
 import InputTestCase from './InputTestCase';
+import ReplaceEmailInput from './ReplaceEmailInput';
 
 const React = window.React;
 
@@ -64,21 +65,36 @@ class TextInputFixtures extends React.Component {
           <Fixture>
             <form className="control-box">
               <fieldset>
-                <legend>Text</legend>
+                <legend>Empty value prop string</legend>
+                <input value="" required={true} />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop</legend>
                 <input required={true} />
               </fieldset>
               <fieldset>
-                <legend>Date</legend>
+                <legend>Empty defaultValue prop string</legend>
+                <input required={true} defaultValue="" />
+              </fieldset>
+              <fieldset>
+                <legend>No value prop date input</legend>
                 <input type="date" required={true} />
               </fieldset>
+              <fieldset>
+                <legend>Empty value prop date input</legend>
+                <input type="date" value="" required={true} />
+              </fieldset>
             </form>
           </Fixture>
 
           <p className="footnote">
             Checking the date type is also important because of a prior fix for
             iOS Safari that involved assigning over value/defaultValue
-            properties of the input to prevent a display bug. This also
-            triggered input validation.
+            properties of the input to prevent a display bug. This also triggers
+            input validation.
+          </p>
+          <p className="footnote">
+            The date inputs should be blank in iOS. This is not a bug.
           </p>
         </TestCase>
 
@@ -110,6 +126,21 @@ class TextInputFixtures extends React.Component {
           <InputTestCase type="url" defaultValue="" />
         </TestCase>
 
+        <TestCase
+          title="Replacing email input with text disabled input"
+          relatedIssues="12062">
+          <TestCase.Steps>
+            <li>Type "test@test.com"</li>
+            <li>Press enter</li>
+          </TestCase.Steps>
+
+          <TestCase.ExpectedResult>
+            There should be no selection-related error in the console.
+          </TestCase.ExpectedResult>
+
+          <ReplaceEmailInput />
+        </TestCase>
+
         <TestCase title="All inputs" description="General test of all inputs">
           <InputTestCase type="text" defaultValue="Text" />
           <InputTestCase type="email" defaultValue="user@example.com" />

fixtures/dom/src/polyfills.js

@@ -1,3 +1,4 @@
+import 'core-js/es6/symbol';
 import 'core-js/es6/promise';
 import 'core-js/es6/set';
 import 'core-js/es6/map';

fixtures/dom/src/react-loader.js

@@ -1,3 +1,5 @@
+import semver from 'semver';
+
 /**
  * Take a version from the window query string and load a specific
  * version of React.
@@ -34,36 +36,51 @@ function loadScript(src) {
   });
 }
 
-export default function loadReact() {
-  let REACT_PATH = 'react.development.js';
-  let DOM_PATH = 'react-dom.development.js';
+export function reactPaths() {
+  let reactPath = 'react.development.js';
+  let reactDOMPath = 'react-dom.development.js';
+  let reactDOMServerPath = 'react-dom-server.browser.development.js';
 
   let query = parseQuery(window.location.search);
   let version = query.version || 'local';
 
   if (version !== 'local') {
+    const {major, minor, prerelease} = semver(version);
+    const [preReleaseStage] = prerelease;
     // The file structure was updated in 16. This wasn't the case for alphas.
     // Load the old module location for anything less than 16 RC
-    if (parseInt(version, 10) >= 16 && version.indexOf('alpha') < 0) {
-      REACT_PATH =
+    if (major >= 16 && !(minor === 0 && preReleaseStage === 'alpha')) {
+      reactPath =
         'https://unpkg.com/react@' + version + '/umd/react.development.js';
-      DOM_PATH =
+      reactDOMPath =
         'https://unpkg.com/react-dom@' +
         version +
         '/umd/react-dom.development.js';
+      reactDOMServerPath =
+        'https://unpkg.com/react-dom@' +
+        version +
+        '/umd/react-dom-server.browser.development';
     } else {
-      REACT_PATH = 'https://unpkg.com/react@' + version + '/dist/react.js';
-      DOM_PATH =
+      reactPath = 'https://unpkg.com/react@' + version + '/dist/react.js';
+      reactDOMPath =
         'https://unpkg.com/react-dom@' + version + '/dist/react-dom.js';
+      reactDOMServerPath =
+        'https://unpkg.com/react-dom@' + version + '/dist/react-dom-server.js';
     }
   }
 
   const needsReactDOM = version === 'local' || parseFloat(version, 10) > 0.13;
 
-  let request = loadScript(REACT_PATH);
+  return {reactPath, reactDOMPath, reactDOMServerPath, needsReactDOM};
+}
+
+export default function loadReact() {
+  const {reactPath, reactDOMPath, needsReactDOM} = reactPaths();
+
+  let request = loadScript(reactPath);
 
   if (needsReactDOM) {
-    request = request.then(() => loadScript(DOM_PATH));
+    request = request.then(() => loadScript(reactDOMPath));
   } else {
     // Aliasing React to ReactDOM for compatibility.
     request = request.then(() => {

fixtures/dom/src/style.css

@@ -4,14 +4,13 @@
   box-sizing: border-box;
 }
 
-html {
-  font-size: 10px;
-}
 body {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Arimo", "Roboto", "Oxygen",
     "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
-  font-size: 1.4rem;
+  font-size: 15px;
+  line-height: 24px;
   margin: 0;
   padding: 0;
 }
@@ -26,23 +25,82 @@ button {
   padding: 6px 8px;
 }
 
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: #171717;
+  font-weight: 600;
+}
+
+h1 {
+  font-size: 32px;
+  margin: 24px 0;
+}
+
+h2 {
+  font-size: 24px;
+  margin: 24px 0 16px;
+}
+
+h3 {
+  font-size: 18px;
+  margin: 8px 0 16px;
+}
+
+h4, h4, h5, h6 {
+  font-size: 16px;
+  margin: 0 0 16px;
+}
+
+code {
+  font-size: 90%;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:link:hover,
+a:link:focus {
+  text-decoration: underline;
+}
+
+textarea {
+  border-radius: 2px;
+  border: 1px solid #d9d9d9;
+  font-size: 12px;
+  min-height: 100px;
+  min-width: 300px;
+  padding: 8px;
+}
+
 .header {
-  background: #222;
-  box-shadow: inset 0 -1px 3px #000;
-  font-size: 1.6rem;
-  line-height: 3.2rem;
+  background: #171717;
   overflow: hidden;
-  padding: .8rem 1.6rem;
+  padding: 8px;
+}
+
+.header a {
+  text-decoration: none;
+  color: white;
+}
+
+.header a:hover,
+.header a:focus{
+  text-decoration: underline;
 }
 
 .header select {
-  width: 12rem;
+  margin-left: 8px;
+  max-width: 150px;
 }
 
 .header__inner {
   display: table;
   margin: 0 auto;
-  max-width: 1000px;
   overflow: hidden;
   text-align: center;
   width: 100%;
@@ -108,11 +166,11 @@ fieldset {
 
 ul,
 ol {
-  margin: 0 0 2rem 0;
+  margin: 0 0 16px 0;
 }
 
-li {
-  margin-bottom: 0.4rem;
+p {
+  margin: 16px 0;
 }
 
 .type-subheading {
@@ -130,11 +188,10 @@ li {
 .footnote {
   border-left: 4px solid #aaa;
   color: #444;
+  font-size: 14px;
   font-style: italic;
-  line-height: 1.5;
-  margin-bottom: 2.4rem;
-  margin-left: 0.4rem;
-  padding-left: 1.6rem;
+  margin-left: 8px;
+  padding-left: 16px;
 }
 
 .test-case {
@@ -158,7 +215,7 @@ li {
 }
 
 .test-case__body {
-  padding: 0 15px;
+  padding: 10px;
 }
 
 .test-case__desc {
@@ -222,3 +279,24 @@ li {
 .field-group {
   overflow: hidden;
 }
+
+table {
+  border: 1px solid #d9d9d9;
+  border-width: 1px 1px 1px 0;
+  border-collapse: collapse;
+  margin: 16px 0;
+  font-size: 14px;
+  line-height: 20px;
+  width: 100%;
+}
+
+td,
+th {
+  text-align: left;
+  border: 1px solid #d9d9d9;
+  padding: 6px;
+}
+
+tbody tr:nth-child(even) {
+  background: #f0f0f0;
+}

fixtures/dom/src/tags.js

@@ -52,7 +52,9 @@ export default function getVersionTags() {
       cachedTags = JSON.parse(cachedTags);
       resolve(cachedTags);
     } else {
-      fetch('https://api.github.com/repos/facebook/react/tags', {mode: 'cors'})
+      fetch('https://api.github.com/repos/facebook/react/tags?per_page=1000', {
+        mode: 'cors',
+      })
         .then(res => res.json())
         .then(tags => {
           // A message property indicates an error was sent from the API

fixtures/dom/yarn.lock

@@ -2,6 +2,10 @@
 # yarn lockfile v1
 
 
+"@babel/standalone@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.0.0.tgz#856446641620c1c5f0ca775621d478324ebd1f52"
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -1556,6 +1560,10 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
+codemirror@^5.40.0:
+  version "5.40.0"
+  resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.40.0.tgz#2f5ed47366e514f41349ba0fe34daaa39be4e257"
+
 color-convert@^1.3.0:
   version "1.8.2"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.8.2.tgz#be868184d7c8631766d54e7078e2672d7c7e3339"
@@ -5878,6 +5886,10 @@ semver@^5.0.3:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e"
 
+semver@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab"
+
 send@0.14.1:
   version "0.14.1"
   resolved "https://registry.yarnpkg.com/send/-/send-0.14.1.tgz#a954984325392f51532a7760760e459598c89f7a"

fixtures/packaging/browserify/dev/package.json

@@ -2,11 +2,10 @@
   "private": true,
   "name": "browserify-dev-fixture",
   "dependencies": {
-    "browserify": "^13.3.0",
-    "react": "link:../../../../build/node_modules/react",
-    "react-dom": "link:../../../../build/node_modules/react-dom"
+    "browserify": "^13.3.0"
   },
   "scripts": {
-    "build": "rm -f output.js && browserify ./input.js -o output.js"
+    "build": "rm -f output.js && browserify ./input.js -o output.js",
+    "prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
   }
 }

fixtures/packaging/browserify/dev/yarn.lock

@@ -25,10 +25,6 @@ array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -254,10 +250,6 @@ convert-source-map@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -365,12 +357,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
 events@~1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/events/-/events-1.1.1.tgz#9ebdb7635ad099c70dcc4c2a1f5004288e8bd924"
@@ -382,18 +368,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -455,10 +429,6 @@ https-browserify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-iconv-lite@~0.4.13:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
-
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -505,10 +475,6 @@ is-buffer@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
 isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -517,17 +483,6 @@ isarray@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
-js-tokens@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
 json-stable-stringify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
@@ -560,12 +515,6 @@ lodash.memoize@~3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
-
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -618,17 +567,6 @@ module-deps@^4.0.8:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
-object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -693,20 +631,6 @@ process@~0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 public-encrypt@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
@@ -739,14 +663,6 @@ randombytes@^2.0.0, randombytes@^2.0.1:
   dependencies:
     safe-buffer "^5.1.0"
 
-"react-dom@link:../../../../build/node_modules/react-dom":
-  version "0.0.0"
-  uid ""
-
-"react@link:../../../../build/node_modules/react":
-  version "0.0.0"
-  uid ""
-
 read-only-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -797,10 +713,6 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-
 sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -910,10 +822,6 @@ typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
 umd@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
@@ -941,10 +849,6 @@ vm-browserify@~0.0.1:
   dependencies:
     indexof "0.0.1"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

fixtures/packaging/browserify/prod/package.json

@@ -2,12 +2,11 @@
   "private": true,
   "name": "browserify-prod-fixture",
   "dependencies": {
-    "browserify": "^13.3.0",
-    "react": "link:../../../../build/node_modules/react",
-    "react-dom": "link:../../../../build/node_modules/react-dom"
+    "browserify": "^13.3.0"
   },
   "scripts": {
-    "build": "rm -f output.js && browserify ./input.js -g [envify --NODE_ENV 'production'] -o output.js"
+    "build": "rm -f output.js && browserify ./input.js -g [envify --NODE_ENV 'production'] -o output.js",
+    "prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
   },
   "devDependencies": {
     "envify": "^4.0.0"

fixtures/packaging/browserify/prod/yarn.lock

@@ -25,10 +25,6 @@ array-reduce@~0.0.0:
   version "0.0.0"
   resolved "https://registry.yarnpkg.com/array-reduce/-/array-reduce-0.0.0.tgz#173899d3ffd1c7d9383e4479525dbe278cab5f2b"
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -254,10 +250,6 @@ convert-source-map@~1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.1.3.tgz#4829c877e9fe49b3161f3bf3673888e204699860"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -365,12 +357,6 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
 envify@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/envify/-/envify-4.1.0.tgz#f39ad3db9d6801b4e6b478b61028d3f0b6819f7e"
@@ -393,18 +379,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -466,10 +440,6 @@ https-browserify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-iconv-lite@~0.4.13:
-  version "0.4.19"
-  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
-
 ieee754@^1.1.4:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.8.tgz#be33d40ac10ef1926701f6f08a2d86fbfd1ad3e4"
@@ -516,10 +486,6 @@ is-buffer@^1.1.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.5.tgz#1f3b26ef613b214b88cbca23cc6c01d87961eecc"
 
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
 isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
@@ -528,17 +494,6 @@ isarray@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
-js-tokens@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
 json-stable-stringify@~0.0.0:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/json-stable-stringify/-/json-stable-stringify-0.0.1.tgz#611c23e814db375527df851193db59dd2af27f45"
@@ -571,12 +526,6 @@ lodash.memoize@~3.0.3:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-3.0.4.tgz#2dcbd2c287cbc0a55cc42328bd0c736150d53e3f"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
-
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -629,17 +578,6 @@ module-deps@^4.0.8:
     through2 "^2.0.0"
     xtend "^4.0.0"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
-object-assign@^4.1.0, object-assign@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
-
 once@^1.3.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
@@ -704,20 +642,6 @@ process@~0.11.0:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 public-encrypt@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/public-encrypt/-/public-encrypt-4.0.0.tgz#39f699f3a46560dd5ebacbca693caf7c65c18cc6"
@@ -750,14 +674,6 @@ randombytes@^2.0.0, randombytes@^2.0.1:
   dependencies:
     safe-buffer "^5.1.0"
 
-"react-dom@link:../../../../build/node_modules/react-dom":
-  version "0.0.0"
-  uid ""
-
-"react@link:../../../../build/node_modules/react":
-  version "0.0.0"
-  uid ""
-
 read-only-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/read-only-stream/-/read-only-stream-2.0.0.tgz#2724fd6a8113d73764ac288d4386270c1dbf17f0"
@@ -808,10 +724,6 @@ safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@~5.1.0,
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-
 sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4:
   version "2.4.9"
   resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d"
@@ -921,10 +833,6 @@ typedarray@~0.0.5:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
 umd@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e"
@@ -952,10 +860,6 @@ vm-browserify@~0.0.1:
   dependencies:
     indexof "0.0.1"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-
 wrappy@1:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"

fixtures/packaging/brunch/dev/package.json

@@ -3,11 +3,10 @@
   "name": "brunch-dev-fixture",
   "devDependencies": {
     "brunch": "^2.9.1",
-    "javascript-brunch": "^2.0.0",
-    "react": "link:../../../../build/node_modules/react",
-    "react-dom": "link:../../../../build/node_modules/react-dom"
+    "javascript-brunch": "^2.0.0"
   },
   "scripts": {
-    "build": "rm -rf public && brunch build"
+    "build": "rm -rf public && brunch build",
+    "prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
   }
 }

fixtures/packaging/brunch/dev/yarn.lock

@@ -78,10 +78,6 @@ array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -413,10 +409,6 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -604,12 +596,6 @@ encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
 es-abstract@^1.6.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
@@ -726,18 +712,6 @@ fast-levenshtein@^1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
 
-fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fcache@~0.3:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
@@ -1027,7 +1001,7 @@ https-browserify@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-iconv-lite@0.4.19, iconv-lite@~0.4.13:
+iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
@@ -1152,10 +1126,6 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
 is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
@@ -1182,13 +1152,6 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -1199,10 +1162,6 @@ javascript-brunch@^2.0.0:
   dependencies:
     esprima "~3.0.0"
 
-js-tokens@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -1264,12 +1223,6 @@ loggy@~0.3.0:
     ansicolors "~0.3.2"
     growl "~1.8.1"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
-
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -1423,13 +1376,6 @@ node-browser-modules@^0.1.0:
     util "~0.10.3"
     vm-browserify "~0.0.4"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-pre-gyp@^0.6.36:
   version "0.6.38"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
@@ -1479,7 +1425,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -1605,20 +1551,6 @@ promise.prototype.finally@^2:
     es-abstract "^1.6.1"
     function-bind "^1.1.0"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -1704,14 +1636,6 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-"react-dom@link:../../../../build/node_modules/react-dom":
-  version "0.0.0"
-  uid ""
-
-"react@link:../../../../build/node_modules/react":
-  version "0.0.0"
-  uid ""
-
 read-components@~0.7:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
@@ -1870,10 +1794,6 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-
 setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -2053,10 +1973,6 @@ type-is@~1.6.15:
     media-typer "0.3.0"
     mime-types "~2.1.15"
 
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -2118,10 +2034,6 @@ vm-browserify@~0.0.4:
   dependencies:
     indexof "0.0.1"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-
 which@^1.2.12:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"

fixtures/packaging/brunch/prod/package.json

@@ -3,11 +3,10 @@
   "name": "brunch-prod-fixture",
   "devDependencies": {
     "brunch": "^2.9.1",
-    "javascript-brunch": "^2.0.0",
-    "react": "link:../../../../build/node_modules/react",
-    "react-dom": "link:../../../../build/node_modules/react-dom"
+    "javascript-brunch": "^2.0.0"
   },
   "scripts": {
-    "build": "rm -rf public && brunch build -p"
+    "build": "rm -rf public && brunch build -p",
+    "prebuild": "cp -r ../../../../build/node_modules/* ./node_modules/"
   }
 }

fixtures/packaging/brunch/prod/yarn.lock

@@ -78,10 +78,6 @@ array-unique@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.2.1.tgz#a1d97ccafcbc2625cc70fadceb36a50c58b01a53"
 
-asap@~2.0.3:
-  version "2.0.6"
-  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
-
 asn1.js@^4.0.0:
   version "4.9.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.9.1.tgz#48ba240b45a9280e94748990ba597d216617fd40"
@@ -413,10 +409,6 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-util-is@1.0.2, core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -604,12 +596,6 @@ encodeurl@~1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20"
 
-encoding@^0.1.11:
-  version "0.1.12"
-  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
-  dependencies:
-    iconv-lite "~0.4.13"
-
 es-abstract@^1.6.1:
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.9.0.tgz#690829a07cae36b222e7fd9b75c0d0573eb25227"
@@ -726,18 +712,6 @@ fast-levenshtein@^1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-1.1.4.tgz#e6a754cc8f15e58987aa9cbd27af66fd6f4e5af9"
 
-fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 fcache@~0.3:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/fcache/-/fcache-0.3.0.tgz#d45f2f908642b91b798e88195ec47881a51c3d44"
@@ -1027,7 +1001,7 @@ https-browserify@~0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-0.0.1.tgz#3f91365cabe60b77ed0ebba24b454e3e09d95a82"
 
-iconv-lite@0.4.19, iconv-lite@~0.4.13:
+iconv-lite@0.4.19:
   version "0.4.19"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
 
@@ -1152,10 +1126,6 @@ is-regex@^1.0.4:
   dependencies:
     has "^1.0.1"
 
-is-stream@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
-
 is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
@@ -1182,13 +1152,6 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -1199,10 +1162,6 @@ javascript-brunch@^2.0.0:
   dependencies:
     esprima "~3.0.0"
 
-js-tokens@^3.0.0:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
-
 jsbn@~0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
@@ -1264,12 +1223,6 @@ loggy@~0.3.0:
     ansicolors "~0.3.2"
     growl "~1.8.1"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
-  dependencies:
-    js-tokens "^3.0.0"
-
 md5.js@^1.3.4:
   version "1.3.4"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.4.tgz#e9bdbde94a20a5ac18b04340fc5764d5b09d901d"
@@ -1423,13 +1376,6 @@ node-browser-modules@^0.1.0:
     util "~0.10.3"
     vm-browserify "~0.0.4"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-pre-gyp@^0.6.36:
   version "0.6.38"
   resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.6.38.tgz#e92a20f83416415bb4086f6d1fb78b3da73d113d"
@@ -1479,7 +1425,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -1605,20 +1551,6 @@ promise.prototype.finally@^2:
     es-abstract "^1.6.1"
     function-bind "^1.1.0"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 proxy-addr@~2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.2.tgz#6571504f47bb988ec8180253f85dd7e14952bdec"
@@ -1704,14 +1636,6 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-"react-dom@link:../../../../build/node_modules/react-dom":
-  version "0.0.0"
-  uid ""
-
-"react@link:../../../../build/node_modules/react":
-  version "0.0.0"
-  uid ""
-
 read-components@~0.7:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/read-components/-/read-components-0.7.0.tgz#77dce7adcb72a514240c47a675b9bcf7a3509dd9"
@@ -1870,10 +1794,6 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
-setimmediate@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
-
 setprototypeof@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
@@ -2053,10 +1973,6 @@ type-is@~1.6.15:
     media-typer "0.3.0"
     mime-types "~2.1.15"
 
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
 uid-number@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -2118,10 +2034,6 @@ vm-browserify@~0.0.4:
   dependencies:
     indexof "0.0.1"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-
 which@^1.2.12:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/which/-/which-1.3.0.tgz#ff04bdfc010ee547d780bec38e1ac1c2777d253a"

fixtures/packaging/index.html

@@ -42,51 +42,51 @@
     </div>
     <div class="frame">
       <h2>browserify (dev)</h2>
-      <iframe src="/fixtures/packaging/browserify/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/browserify/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>browserify (prod)</h2>
-      <iframe src="/fixtures/packaging/browserify/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/browserify/prod/"></iframe>
     </div>
     <div class="frame">
       <h2>brunch (dev)</h2>
-      <iframe src="/fixtures/packaging/brunch/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/brunch/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>brunch (prod)</h2>
-      <iframe src="/fixtures/packaging/brunch/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/brunch/prod/"></iframe>
     </div>
     <div class="frame">
       <h2>rjs (dev)</h2>
-      <iframe src="/fixtures/packaging/rjs/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/rjs/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>rjs (prod)</h2>
-      <iframe src="/fixtures/packaging/rjs/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/rjs/prod/"></iframe>
     </div>    
     <div class="frame">
       <h2>systemjs-builder (dev)</h2>
-      <iframe src="/fixtures/packaging/systemjs-builder/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/systemjs-builder/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>systemjs-builder (prod)</h2>
-      <iframe src="/fixtures/packaging/systemjs-builder/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/systemjs-builder/prod/"></iframe>
     </div>
     <div class="frame">
       <h2>webpack (dev)</h2>
-      <iframe src="/fixtures/packaging/webpack/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/webpack/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>webpack (prod)</h2>
-      <iframe src="/fixtures/packaging/webpack/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/webpack/prod/"></iframe>
     </div>
     <div class="frame">
       <h2>webpack-alias (dev)</h2>
-      <iframe src="/fixtures/packaging/webpack-alias/dev/index.html"></iframe>
+      <iframe src="/fixtures/packaging/webpack-alias/dev/"></iframe>
     </div>
     <div class="frame">
       <h2>webpack-alias (prod)</h2>
-      <iframe src="/fixtures/packaging/webpack-alias/prod/index.html"></iframe>
+      <iframe src="/fixtures/packaging/webpack-alias/prod/"></iframe>
     </div>
   </body>
 </html>

fixtures/packaging/rjs/dev/config.js

@@ -6,5 +6,6 @@ module.exports = {
   paths: {
     react: '../../../../build/dist/react.development',
     'react-dom': '../../../../build/dist/react-dom.development',
+    schedule: '../../../../build/dist/schedule.development',
   },
 };

fixtures/packaging/rjs/prod/config.js

@@ -6,5 +6,6 @@ module.exports = {
   paths: {
     react: '../../../../build/dist/react.production.min',
     'react-dom': '../../../../build/dist/react-dom.production.min',
+    schedule: '../../../../build/dist/schedule.development',
   },
 };

fixtures/packaging/systemjs-builder/dev/config.js

@@ -2,5 +2,6 @@ System.config({
   paths: {
     react: '../../../../build/dist/react.development.js',
     'react-dom': '../../../../build/dist/react-dom.development.js',
+    schedule: '../../../../build/dist/schedule.development',
   },
 });

fixtures/packaging/systemjs-builder/prod/config.js

@@ -2,5 +2,6 @@ System.config({
   paths: {
     react: '../../../../build/dist/react.production.min.js',
     'react-dom': '../../../../build/dist/react-dom.production.min.js',
+    schedule: '../../../../build/dist/schedule.development',
   },
 });

fixtures/schedule/index.html

@@ -0,0 +1,498 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%;">
+  <head>
+    <meta charset="utf-8">
+    <title>Schedule Test Page</title>
+  <style>
+    .correct {
+      border: solid green 2px;
+    }
+    .incorrect {
+      border: dashed red 2px;
+    }
+  </style>
+  </head>
+  <body>
+    <h1>Schedule Fixture</h1>
+    <p>
+      This fixture is for manual testing purposes, and the patterns used in
+      implementing it should not be used as a model. This is mainly for anyone
+      working on making changes to the `schedule` module.
+    </p>
+    <h2>Tests:</h2>
+    <ol>
+      <li>
+        <button onClick="runTestOne()">Run Test 1</button>
+        <p>Calls the callback within the frame when not blocked:</p>
+        <div><b>Expected:</b></div>
+        <div id="test-1-expected">
+        </div>
+        <div> -------------------------------------------------</div>
+        <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-1"></div>
+      </li>
+      <li>
+        <p>Accepts multiple callbacks and calls within frame when not blocked</p>
+        <button onClick="runTestTwo()">Run Test 2</button>
+        <div><b>Expected:</b></div>
+        <div id="test-2-expected">
+        </div>
+        <div> -------------------------------------------------</div>
+        <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-2"></div>
+      </li>
+      <li>
+        <p>Schedules callbacks in correct order when they use scheduleWork to schedule themselves</p>
+        <button onClick="runTestThree()">Run Test 3</button>
+        <div><b>Expected:</b></div>
+        <div id="test-3-expected">
+        </div>
+        <div> -------------------------------------------------</div>
+        <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-3"></div>
+      </li>
+      <li>
+        <p>Calls timed out callbacks and then any more pending callbacks, defers others if time runs out</p>
+        <button onClick="runTestFour()">Run Test 4</button>
+        <div><b>Expected:</b></div>
+        <div id="test-4-expected">
+        </div>
+        <div> -------------------------------------------------</div>
+        <div> If you see the same above and below it's correct.
+        <div> -------------------------------------------------</div>
+        <div><b>Actual:</b></div>
+        <div id="test-4"></div>
+      </li>
+      <li>
+        <p>When some callbacks throw errors, still calls them all within the same frame</p>
+        <p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
+        <button onClick="runTestFive()">Run Test 5</button>
+      </li>
+      <li>
+        <p>When some callbacks throw errors <b> and some also time out</b>, still calls them all within the same frame</p>
+        <p><b>IMPORTANT:</b> Open the console when you run this! Inspect the logs there!</p>
+        <button onClick="runTestSix()">Run Test 6</button>
+      </li>
+      <li>
+        <p>Continues calling callbacks even when user switches away from this tab</p>
+        <button onClick="runTestSeven()">Run Test 7</button>
+        <div><b>Click the button above, observe the counter, then switch to
+            another tab and switch back:</b></div>
+        <div id="test-7">
+        </div>
+        <div> If the counter advanced while you were away from this tab, it's correct.</div>
+      </li>
+    </ol>
+    <script src="../../build/dist/schedule.development.js"></script>
+    <script src="https://unpkg.com/babel-standalone@6/babel.js"></script>
+    <script type="text/babel">
+const {
+  unstable_scheduleWork: scheduleWork,
+  unstable_cancelWork: cancelWork,
+  unstable_now: now
+} = Schedule;
+function displayTestResult(testNumber) {
+  const expectationNode = document.getElementById('test-' + testNumber + '-expected');
+  const resultNode = document.getElementById('test-' + testNumber);
+  resultNode.innerHTML = latestResults[testNumber - 1].join('<br />');
+  expectationNode.innerHTML = expectedResults[testNumber - 1].join('<br />');
+}
+function clearTestResult(testNumber) {
+  const resultNode = document.getElementById('test-' + testNumber);
+  resultNode.innerHTML = '';
+  latestResults[testNumber - 1] = [];
+}
+function updateTestResult(testNumber, textToAddToResult) {
+  latestResults[testNumber - 1].push(textToAddToResult);
+};
+function checkTestResult(testNumber) {
+
+  let correct = true;
+  const expected = expectedResults[testNumber - 1]; // zero indexing
+  const result = latestResults[testNumber - 1]; // zero indexing
+  if (expected.length !== result.length) {
+    correct = false;
+  } else {
+    for (let i = 0, len = expected.length; i < len; i++) {
+      if (expected[i] !== result[i]) {
+        correct = false;
+        break;
+      }
+    }
+  }
+  const currentClass = correct ? 'correct' : 'incorrect';
+  const previousClass = correct ? 'incorrect' : 'correct';
+  document.getElementById('test-' + testNumber).classList.remove(previousClass);
+  document.getElementById('test-' + testNumber).classList.add(currentClass);
+}
+function logWhenFramesStart(testNumber, cb) {
+  requestAnimationFrame(() => {
+    updateTestResult(testNumber, 'frame 1 started');
+    requestAnimationFrame(() => {
+      updateTestResult(testNumber, 'frame 2 started');
+      requestAnimationFrame(() => {
+        updateTestResult(testNumber, 'frame 3 started... we stop counting now.');
+        cb();
+      });
+    });
+  });
+}
+// push in results when we run the test
+const latestResults = [
+  // test 1
+  [
+  ],
+  // test 2
+  [
+  ],
+  // test 3
+  [
+  ],
+  // test 4
+  [
+  ],
+  // test 5
+  [
+  ],
+];
+
+const expectedResults = [
+  // test 1
+  [
+    'scheduled Cb1',
+    'frame 1 started',
+    'cb1 called with argument of {"didTimeout":false}',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 2
+  [
+    'scheduled CbA',
+    'scheduled CbB',
+    'frame 1 started',
+    'cbA called with argument of {"didTimeout":false}',
+    'cbB called with argument of {"didTimeout":false}',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 3
+  [
+    'scheduled CbA',
+    'scheduled CbB',
+    'frame 1 started',
+    'scheduled CbA again',
+    'cbA0 called with argument of {"didTimeout":false}',
+    'cbB called with argument of {"didTimeout":false}',
+    'cbA1 called with argument of {"didTimeout":false}',
+    'frame 2 started',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 4
+  [
+    'scheduled cbA',
+    'scheduled cbB',
+    'scheduled cbC',
+    'scheduled cbD',
+    'frame 1 started',
+    'cbC called with argument of {"didTimeout":true}',
+    'cbA called with argument of {"didTimeout":false}',
+    'cbA running and taking some time',
+    'frame 2 started',
+    'cbB called with argument of {"didTimeout":false}',
+    'cbD called with argument of {"didTimeout":false}',
+    'frame 3 started... we stop counting now.',
+  ],
+  // test 5
+  [
+    // ... TODO
+  ],
+];
+function runTestOne() {
+  // Test 1
+  // Calls the callback with the frame when not blocked
+  clearTestResult(1);
+  const test1Log = [];
+  const cb1Arguments = [];
+  const cb1 = (x) => {
+    updateTestResult(1, 'cb1 called with argument of ' + JSON.stringify(x));
+  }
+  scheduleWork(cb1);
+  updateTestResult(1, 'scheduled Cb1');
+  logWhenFramesStart(1, () => {
+    displayTestResult(1);
+    checkTestResult(1);
+  });
+};
+
+function runTestTwo() {
+  // Test 2
+  // accepts multiple callbacks and calls within frame when not blocked
+  clearTestResult(2);
+  const cbA = (x) => {
+    updateTestResult(2, 'cbA called with argument of ' + JSON.stringify(x));
+  }
+  const cbB = (x) => {
+    updateTestResult(2, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  scheduleWork(cbA);
+  updateTestResult(2, 'scheduled CbA');
+  scheduleWork(cbB);
+  updateTestResult(2, 'scheduled CbB');
+  logWhenFramesStart(2, () => {
+    displayTestResult(2);
+    checkTestResult(2);
+  });
+}
+
+function runTestThree() {
+  // Test 3
+  // Schedules callbacks in correct order when they use scheduleWork to schedule themselves
+  clearTestResult(3);
+  let callbackAIterations = 0;
+  const cbA = (x) => {
+    if (callbackAIterations < 1) {
+      scheduleWork(cbA);
+      updateTestResult(3, 'scheduled CbA again');
+    }
+    updateTestResult(3, 'cbA' + callbackAIterations + ' called with argument of ' + JSON.stringify(x));
+    callbackAIterations++;
+  }
+  const cbB = (x) => {
+    updateTestResult(3, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  scheduleWork(cbA);
+  updateTestResult(3, 'scheduled CbA');
+  scheduleWork(cbB);
+  updateTestResult(3, 'scheduled CbB');
+  logWhenFramesStart(3, () => {
+    displayTestResult(3);
+    checkTestResult(3);
+  });
+}
+
+function waitForTimeToPass(timeInMs) {
+  const startTime = Date.now();
+  const endTime = startTime + timeInMs;
+  while (Date.now() < endTime) {
+    // wait...
+  }
+}
+
+function runTestFour() {
+  // Test 4
+  // Calls timed out callbacks and then any more pending callbacks, defers others if time runs out
+  clearTestResult(4);
+  const cbA = (x) => {
+    updateTestResult(4, 'cbA called with argument of ' + JSON.stringify(x));
+    updateTestResult(4, 'cbA running and taking some time');
+    waitForTimeToPass(35);
+  }
+  const cbB = (x) => {
+    updateTestResult(4, 'cbB called with argument of ' + JSON.stringify(x));
+  }
+  const cbC = (x) => {
+    updateTestResult(4, 'cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    updateTestResult(4, 'cbD called with argument of ' + JSON.stringify(x));
+  }
+  scheduleWork(cbA); // won't time out
+  updateTestResult(4, 'scheduled cbA');
+  scheduleWork(cbB, {timeout: 100}); // times out later
+  updateTestResult(4, 'scheduled cbB');
+  scheduleWork(cbC, {timeout: 1}); // will time out fast
+  updateTestResult(4, 'scheduled cbC');
+  scheduleWork(cbD); // won't time out
+  updateTestResult(4, 'scheduled cbD');
+
+  // should have run in order of C, A, B, D
+
+  logWhenFramesStart(4, () => {
+    displayTestResult(4);
+    checkTestResult(4);
+  });
+
+}
+
+// Error handling
+
+function runTestFive() {
+  // Test 5
+  // When some callbacks throw errors, still calls them all within the same frame
+  const cbA = (x) => {
+    console.log('cbA called with argument of ' + JSON.stringify(x));
+  }
+  const cbB = (x) => {
+    console.log('cbB called with argument of ' + JSON.stringify(x));
+    console.log('cbB is about to throw an error!');
+    throw new Error('error B');
+  }
+  const cbC = (x) => {
+    console.log('cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    console.log('cbD called with argument of ' + JSON.stringify(x));
+    console.log('cbD is about to throw an error!');
+    throw new Error('error D');
+  }
+  const cbE = (x) => {
+    console.log('cbE called with argument of ' + JSON.stringify(x));
+    console.log('This was the last callback! ------------------');
+  }
+
+  console.log('We are aiming to roughly emulate the way ' +
+  '`requestAnimationFrame` handles errors from callbacks.');
+
+  console.log('about to run the simulation of what it should look like...:');
+
+  requestAnimationFrame(() => {
+    console.log('frame 1 started');
+    requestAnimationFrame(() => {
+      console.log('frame 2 started');
+      requestAnimationFrame(() => {
+        console.log('frame 3 started... we stop counting now.');
+        console.log('about to wait a moment and start this again but ' +
+        'with the scheduler instead of requestAnimationFrame');
+        setTimeout(runSchedulerCode, 1000);
+      });
+    });
+  });
+  requestAnimationFrame(cbA);
+  console.log('scheduled cbA');
+  requestAnimationFrame(cbB); // will throw error
+  console.log('scheduled cbB');
+  requestAnimationFrame(cbC);
+  console.log('scheduled cbC');
+  requestAnimationFrame(cbD); // will throw error
+  console.log('scheduled cbD');
+  requestAnimationFrame(cbE);
+  console.log('scheduled cbE');
+
+
+  function runSchedulerCode() {
+    console.log('-------------------------------------------------------------');
+    console.log('now lets see what it looks like using the scheduler...:');
+    requestAnimationFrame(() => {
+      console.log('frame 1 started');
+      requestAnimationFrame(() => {
+        console.log('frame 2 started');
+        requestAnimationFrame(() => {
+          console.log('frame 3 started... we stop counting now.');
+        });
+      });
+    });
+    scheduleWork(cbA);
+    console.log('scheduled cbA');
+    scheduleWork(cbB); // will throw error
+    console.log('scheduled cbB');
+    scheduleWork(cbC);
+    console.log('scheduled cbC');
+    scheduleWork(cbD); // will throw error
+    console.log('scheduled cbD');
+    scheduleWork(cbE);
+    console.log('scheduled cbE');
+  };
+}
+
+function runTestSix() {
+  // Test 6
+  // When some callbacks throw errors, still calls them all within the same frame
+  const cbA = (x) => {
+    console.log('cbA called with argument of ' + JSON.stringify(x));
+    console.log('cbA is about to throw an error!');
+    throw new Error('error A');
+  }
+  const cbB = (x) => {
+    console.log('cbB called with argument of ' + JSON.stringify(x));
+  }
+  const cbC = (x) => {
+    console.log('cbC called with argument of ' + JSON.stringify(x));
+  }
+  const cbD = (x) => {
+    console.log('cbD called with argument of ' + JSON.stringify(x));
+    console.log('cbD is about to throw an error!');
+    throw new Error('error D');
+  }
+  const cbE = (x) => {
+    console.log('cbE called with argument of ' + JSON.stringify(x));
+    console.log('This was the last callback! ------------------');
+  }
+
+  console.log('We are aiming to roughly emulate the way ' +
+  '`requestAnimationFrame` handles errors from callbacks.');
+
+  console.log('about to run the simulation of what it should look like...:');
+
+  requestAnimationFrame(() => {
+    console.log('frame 1 started');
+    requestAnimationFrame(() => {
+      console.log('frame 2 started');
+      requestAnimationFrame(() => {
+        console.log('frame 3 started... we stop counting now.');
+        console.log('about to wait a moment and start this again but ' +
+        'with the scheduler instead of requestAnimationFrame');
+        setTimeout(runSchedulerCode, 1000);
+      });
+    });
+  });
+  requestAnimationFrame(cbC);
+  console.log('scheduled cbC first; simulating timing out');
+  requestAnimationFrame(cbD); // will throw error
+  console.log('scheduled cbD first; simulating timing out');
+  requestAnimationFrame(cbE);
+  console.log('scheduled cbE first; simulating timing out');
+  requestAnimationFrame(cbA);
+  console.log('scheduled cbA'); // will throw error
+  requestAnimationFrame(cbB);
+  console.log('scheduled cbB');
+
+
+  function runSchedulerCode() {
+    console.log('-------------------------------------------------------------');
+    console.log('now lets see what it looks like using the scheduler...:');
+    requestAnimationFrame(() => {
+      console.log('frame 1 started');
+      requestAnimationFrame(() => {
+        console.log('frame 2 started');
+        requestAnimationFrame(() => {
+          console.log('frame 3 started... we stop counting now.');
+        });
+      });
+    });
+    scheduleWork(cbA);
+    console.log('scheduled cbA');
+    scheduleWork(cbB); // will throw error
+    console.log('scheduled cbB');
+    scheduleWork(cbC, {timeout: 1});
+    console.log('scheduled cbC');
+    scheduleWork(cbD, {timeout: 1}); // will throw error
+    console.log('scheduled cbD');
+    scheduleWork(cbE, {timeout: 1});
+    console.log('scheduled cbE');
+  };
+}
+
+function runTestSeven() {
+  // Test 7
+  // Calls callbacks, continues calling them even when this tab is in the
+  // background
+  clearTestResult(7);
+  let counter = -1;
+  function incrementCounterAndScheduleNextCallback() {
+    const counterNode = document.getElementById('test-7');
+    counter++;
+    counterNode.innerHTML = counter;
+    waitForTimeToPass(100);
+    scheduleWork(incrementCounterAndScheduleNextCallback);
+  }
+  scheduleWork(incrementCounterAndScheduleNextCallback);
+}
+    </script type="text/babel">
+  </body>
+</html>

fixtures/ssr/yarn.lock

@@ -1334,10 +1334,6 @@ cookie@0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.3.1.tgz#e7e0a1f9ef43b4c8ba925c5c5a96e806d16873bb"
 
-core-js@^1.0.0:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
-
 core-js@^2.4.0:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.4.1.tgz#4de911e667b0eae9124e34254b53aea6fc618d3e"
@@ -2057,18 +2053,6 @@ fb-watchman@^1.8.0, fb-watchman@^1.9.0:
   dependencies:
     bser "1.0.2"
 
-fbjs@^0.8.16:
-  version "0.8.16"
-  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
-  dependencies:
-    core-js "^1.0.0"
-    isomorphic-fetch "^2.1.1"
-    loose-envify "^1.0.0"
-    object-assign "^4.1.0"
-    promise "^7.1.1"
-    setimmediate "^1.0.5"
-    ua-parser-js "^0.7.9"
-
 figures@^1.3.5:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/figures/-/figures-1.7.0.tgz#cbe1e3affcf1cd44b80cadfed28dc793a9701d2e"
@@ -2753,13 +2737,6 @@ isobject@^2.0.0:
   dependencies:
     isarray "1.0.0"
 
-isomorphic-fetch@^2.1.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
-  dependencies:
-    node-fetch "^1.0.1"
-    whatwg-fetch ">=0.10.0"
-
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -3265,7 +3242,7 @@ longest@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1:
+loose-envify@^1.0.0:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848"
   dependencies:
@@ -3446,13 +3423,6 @@ node-emoji@^1.4.1:
   dependencies:
     string.prototype.codepointat "^0.2.0"
 
-node-fetch@^1.0.1:
-  version "1.7.3"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
-  dependencies:
-    encoding "^0.1.11"
-    is-stream "^1.0.1"
-
 node-fetch@^1.6.3:
   version "1.6.3"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.6.3.tgz#dc234edd6489982d58e8f0db4f695029abcd8c04"
@@ -3588,7 +3558,7 @@ oauth-sign@~0.8.1:
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/oauth-sign/-/oauth-sign-0.8.2.tgz#46a6ab7f0aead8deae9ec0565780b7d4efeb9d43"
 
-object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.1.1:
+object-assign@4.1.1, object-assign@^4.0.1, object-assign@^4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
@@ -4101,20 +4071,6 @@ promise@7.1.1:
   dependencies:
     asap "~2.0.3"
 
-promise@^7.1.1:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
-  dependencies:
-    asap "~2.0.3"
-
-prop-types@^15.6.0:
-  version "15.6.0"
-  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856"
-  dependencies:
-    fbjs "^0.8.16"
-    loose-envify "^1.3.1"
-    object-assign "^4.1.1"
-
 proxy-addr@~1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-1.1.4.tgz#27e545f6960a44a627d9b44467e35c1b6b4ce2f3"
@@ -4590,7 +4546,7 @@ set-immediate-shim@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz#4b2b1b27eb808a9f8dcc481a58e5e56f599f3f61"
 
-setimmediate@^1.0.4, setimmediate@^1.0.5:
+setimmediate@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
 
@@ -4985,10 +4941,6 @@ typedarray@^0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
 
-ua-parser-js@^0.7.9:
-  version "0.7.17"
-  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
-
 uglify-js@2.8.x, uglify-js@^2.6:
   version "2.8.21"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.21.tgz#1733f669ae6f82fc90c7b25ec0f5c783ee375314"
@@ -5242,10 +5194,6 @@ whatwg-fetch@2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.2.tgz#fe294d1d89e36c5be8b3195057f2e4bc74fc980e"
 
-whatwg-fetch@>=0.10.0:
-  version "2.0.3"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-
 whatwg-url@^4.3.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-4.7.0.tgz#202035ac1955b087cdd20fa8b58ded3ab1cd2af5"

fixtures/tracing/index.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html style="width: 100%; height: 100%;">
+  <head>
+    <meta charset="utf-8">
+    <title>Test tracing UMD</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      ol {
+        display: inline-flex;
+        flex-direction: column;
+        align-items: flex-start;
+      }
+      li {
+        background-color: #F7F7F7;
+        border: solid #CCC 0.125rem;
+        margin-bottom: 0.5rem;
+        border-radius: 0.25rem;
+        padding: 0.5rem;
+      }
+      li:after {
+        content: attr(data-value);
+        margin-left: 0.25rem;
+      }
+      .correct {
+        border-color: #0C0;
+        border-style: solid;
+        background: #EFE;
+      }
+      .incorrect {
+        border-color: #F00;
+        border-style: dashed;
+        background-color: #FEE;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Test tracing UMD</h1>
+    <p>
+      This fixture tests that the new tracing API is accessible via UMD build using the UMD shim.
+      It does not exhaustively test API functionality, only that the forwarded methods can be called.
+    </p>
+    <p>
+      Before running the tests below, check the console to make sure there are no errors.
+    </p>
+    <h3>
+      Tests
+      <button onClick="runAllTests()">Run all tests</button>
+    </h3>
+    <ol>
+      <li id="checkSchedulerAPI" data-value="...">
+        <strong>Test scheduler API</strong>
+      </li>
+      <li id="checkSchedulerTracingAPI" data-value="...">
+        <strong>Test tracing API</strong>
+      </li>
+      <li id="checkSchedulerTracingSubscriptionsAPI" data-value="...">
+        <strong>Test tracing subscriptions API</strong>
+      </li>
+      <li id="checkEndToEndIntegration" data-value="...">
+        <strong>Test end-to-end integration</strong>
+      </li>
+    </ol>
+    <!-- Load the tracing API before react to test that it's lazily evaluated -->
+    <script src="../../build/node_modules/schedule/umd/schedule.development.js"></script>
+    <script src="../../build/node_modules/schedule/umd/schedule-tracing.development.js"></script>
+    <script src="../../build/node_modules/react/umd/react.development.js"></script>
+    <script src="../../build/node_modules/react-dom/umd/react-dom.development.js"></script>
+    <script src="./script.js"></script>
+  </body>
+</html>

fixtures/tracing/script.js

@@ -0,0 +1,205 @@
+function runTest(listItem, callback) {
+  try {
+    callback();
+    listItem.className = 'correct';
+    listItem.setAttribute('data-value', 'All checks pass');
+  } catch (error) {
+    listItem.className = 'incorrect';
+    listItem.setAttribute('data-value', error);
+  }
+}
+
+function runAllTests() {
+  try {
+    checkSchedulerAPI();
+  } finally {
+    try {
+      checkSchedulerTracingAPI();
+    } finally {
+      try {
+        checkSchedulerTracingSubscriptionsAPI();
+      } finally {
+        checkEndToEndIntegration();
+      }
+    }
+  }
+}
+
+function checkSchedulerAPI() {
+  runTest(document.getElementById('checkSchedulerAPI'), () => {
+    if (
+      typeof Schedule === 'undefined' ||
+      typeof Schedule.unstable_now !== 'function' ||
+      typeof Schedule.unstable_scheduleWork !== 'function' ||
+      typeof Schedule.unstable_cancelScheduledWork !== 'function'
+    ) {
+      throw 'API is not defined';
+    }
+
+    if (Schedule.unstable_now() !== performance.now()) {
+      throw 'API does not work';
+    }
+
+    // There is no real way to verify that the two APIs are connected.
+  });
+}
+
+function checkSchedulerTracingAPI() {
+  runTest(document.getElementById('checkSchedulerTracingAPI'), () => {
+    if (
+      typeof ScheduleTracing === 'undefined' ||
+      typeof ScheduleTracing.unstable_clear !== 'function' ||
+      typeof ScheduleTracing.unstable_getCurrent !== 'function' ||
+      typeof ScheduleTracing.unstable_getThreadID !== 'function' ||
+      typeof ScheduleTracing.unstable_trace !== 'function' ||
+      typeof ScheduleTracing.unstable_wrap !== 'function'
+    ) {
+      throw 'API is not defined';
+    }
+
+    try {
+      let interactionsSet;
+      ScheduleTracing.unstable_trace('test', 123, () => {
+        interactionsSet = ScheduleTracing.unstable_getCurrent();
+      });
+      if (interactionsSet.size !== 1) {
+        throw null;
+      }
+      const interaction = Array.from(interactionsSet)[0];
+      if (interaction.name !== 'test' || interaction.timestamp !== 123) {
+        throw null;
+      }
+    } catch (error) {
+      throw 'API does not work';
+    }
+
+    const ForwardedSchedulerTracing =
+      React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ScheduleTracing;
+
+    if (
+      ScheduleTracing.unstable_getThreadID() ===
+      ForwardedSchedulerTracing.unstable_getThreadID()
+    ) {
+      throw 'API forwarding is broken';
+    }
+  });
+}
+
+function checkSchedulerTracingSubscriptionsAPI() {
+  runTest(
+    document.getElementById('checkSchedulerTracingSubscriptionsAPI'),
+    () => {
+      if (
+        typeof ScheduleTracing === 'undefined' ||
+        typeof ScheduleTracing.unstable_subscribe !== 'function' ||
+        typeof ScheduleTracing.unstable_unsubscribe !== 'function'
+      ) {
+        throw 'API is not defined';
+      }
+
+      const onInteractionScheduledWorkCompletedCalls = [];
+      const onInteractionTracedCalls = [];
+      const onWorkCanceledCalls = [];
+      const onWorkScheduledCalls = [];
+      const onWorkStartedCalls = [];
+      const onWorkStoppedCalls = [];
+      const subscriber = {
+        onInteractionScheduledWorkCompleted: (...args) =>
+          onInteractionScheduledWorkCompletedCalls.push(args),
+        onInteractionTraced: (...args) => onInteractionTracedCalls.push(args),
+        onWorkCanceled: (...args) => onWorkCanceledCalls.push(args),
+        onWorkScheduled: (...args) => onWorkScheduledCalls.push(args),
+        onWorkStarted: (...args) => onWorkStartedCalls.push(args),
+        onWorkStopped: (...args) => onWorkStoppedCalls.push(args),
+      };
+
+      try {
+        ScheduleTracing.unstable_subscribe(subscriber);
+        ScheduleTracing.unstable_trace('foo', 123, () => {});
+        ScheduleTracing.unstable_unsubscribe(subscriber);
+        if (onInteractionTracedCalls.length !== 1) {
+          throw null;
+        }
+        const interaction = onInteractionTracedCalls[0][0];
+        if (interaction.name !== 'foo' || interaction.timestamp !== 123) {
+          throw null;
+        }
+        ScheduleTracing.unstable_trace('bar', 456, () => {});
+        if (onInteractionTracedCalls.length !== 1) {
+          throw null;
+        }
+      } catch (error) {
+        throw 'API does not forward methods';
+      }
+
+      const ForwardedSchedulerTracing =
+        React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED
+          .ScheduleTracing;
+
+      try {
+        ForwardedSchedulerTracing.unstable_subscribe(subscriber);
+        ScheduleTracing.unstable_trace('foo', 123, () => {});
+        ForwardedSchedulerTracing.unstable_trace('bar', 456, () => {});
+        ScheduleTracing.unstable_unsubscribe(subscriber);
+        if (onInteractionTracedCalls.length !== 3) {
+          throw null;
+        }
+        const interactionFoo = onInteractionTracedCalls[1][0];
+        const interactionBar = onInteractionTracedCalls[2][0];
+        if (
+          interactionFoo.name !== 'foo' ||
+          interactionFoo.timestamp !== 123 ||
+          interactionBar.name !== 'bar' ||
+          interactionBar.timestamp !== 456
+        ) {
+          throw null;
+        }
+        ForwardedSchedulerTracing.unstable_trace('baz', 789, () => {});
+        if (onInteractionTracedCalls.length !== 3) {
+          throw null;
+        }
+      } catch (error) {
+        throw 'API forwarding is broken';
+      }
+    }
+  );
+}
+
+function checkEndToEndIntegration() {
+  runTest(document.getElementById('checkEndToEndIntegration'), () => {
+    try {
+      const onRenderCalls = [];
+      const onRender = (...args) => onRenderCalls.push(args);
+      const container = document.createElement('div');
+
+      ScheduleTracing.unstable_trace('render', 123, () => {
+        ReactDOM.render(
+          React.createElement(
+            React.unstable_Profiler,
+            {id: 'profiler', onRender},
+            React.createElement('div', null, 'hi')
+          ),
+          container
+        );
+      });
+
+      if (container.textContent !== 'hi') {
+        throw null;
+      }
+
+      if (onRenderCalls.length !== 1) {
+        throw null;
+      }
+      const call = onRenderCalls[0];
+      if (call.length !== 7) {
+        throw null;
+      }
+      const interaction = Array.from(call[6])[0];
+      if (interaction.name !== 'render' || interaction.timestamp !== 123) {
+        throw null;
+      }
+    } catch (error) {
+      throw 'End to end integration is broken';
+    }
+  });
+}

fixtures/unstable-async/suspense/.gitignore

@@ -0,0 +1,14 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+npm-debug.log

fixtures/unstable-async/suspense/README.md

@@ -0,0 +1,37 @@
+# IO "suspense" demo
+
+## What is this fixture?
+
+This is a demo application based on [Dan Abramov's](https://github.com/gaearon) recent [JSConf Iceland talk](https://reactjs.org/blog/2018/03/01/sneak-peek-beyond-react-16.html) about React.
+
+It depends on a local build of React and enables us to easily test async and "suspense" APIs in a more "real world app" like context.
+
+## Can I use this code in production?
+
+No. The APIs being tested here are unstable and some of them have still not been released to NPM. For now, this fixture is only a test harness.
+
+## How do I run this fixture?
+
+Clone the React repository.
+
+First, open this file locally:
+
+* `packages/shared/ReactFeatureFlags.js` (make sure you didn't open a similarly named file!)
+
+Set [the `enableSuspense` flag](https://github.com/facebook/react/blob/d79238f1eeb6634ba7a3df23c3b2709b56cbb8b2/packages/shared/ReactFeatureFlags.js#L19) to `true` and save the file.
+
+**After you've done that,** follow these steps:
+
+```shell
+# 1: Build react from source
+cd /path/to/react
+yarn
+yarn build dom-client,core,simple-cache-provider,schedule --type=NODE
+
+# 2: Install fixture dependencies
+cd fixtures/unstable-async/suspense/
+yarn
+
+# 3: Run the app
+yarn start
+```

fixtures/unstable-async/suspense/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "io-demo",
+  "version": "0.1.0",
+  "private": true,
+  "homepage": ".",
+  "devDependencies": {
+    "gh-pages": "^1.1.0",
+    "react-scripts": "^1.1.4"
+  },
+  "dependencies": {
+    "clipboard": "^1.7.1",
+    "github-fork-ribbon-css": "^0.2.1",
+    "react-draggable": "^3.0.5"
+  },
+  "scripts": {
+    "prestart": "cp -r ../../../build/node_modules/* ./node_modules/",
+    "prebuild": "cp -r ../../../build/node_modules/* ./node_modules/",
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test --env=jsdom",
+    "eject": "react-scripts eject",
+    "deploy": "gh-pages -d build"
+  },
+  "eslintConfig": {
+    "extends": "./node_modules/react-scripts/config/eslint.js"
+  },
+  "browserslist": {
+    "development": [
+      "last 2 chrome versions",
+      "last 2 firefox versions",
+      "last 2 edge versions"
+    ],
+    "production": [
+      ">1%",
+      "last 4 versions",
+      "Firefox ESR",
+      "not ie < 11"
+    ]
+  }
+}

fixtures/unstable-async/suspense/public/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="./src/favicon.ico">
+    <title>React Core Team</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <div id="debugger"></div>
+  </body>
+</html>

fixtures/unstable-async/suspense/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Emoji Search",
+  "name": "Emoji Search Example App",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": "./index.html",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

fixtures/unstable-async/suspense/src/api/data.js

@@ -0,0 +1,334 @@
+export const coreContributorListJSON = [
+  {
+    id: 'acdlite',
+    name: 'Andrew Clark',
+  },
+  {
+    id: 'bvaughn',
+    name: 'Brian Vaughn',
+  },
+  {
+    id: 'gaearon',
+    name: 'Dan Abramov',
+  },
+  {
+    id: 'trueadm',
+    name: 'Dominic Gannaway',
+  },
+  {
+    id: 'flarnie',
+    name: 'Flarnie Marchan',
+  },
+  {
+    id: 'sebmarkbage',
+    name: 'Sebastian Markbåge',
+  },
+  {
+    id: 'sophiebits',
+    name: 'Sophie Alpert',
+  },
+];
+
+export const userProfileJSON = {
+  acdlite: {
+    id: 'acdlite',
+    name: 'Andrew Clark',
+    image: '/img/acdlite.jpeg',
+    location: 'Redwood City, CA',
+    email: 'acdlite@me.com',
+    tagline: 'React core at Facebook. Hi!',
+  },
+  bvaughn: {
+    id: 'bvaughn',
+    name: 'Brian Vaughn',
+    image: '/img/bvaughn.jpeg',
+    location: 'Mountain View, CA',
+    email: 'brian.david.vaughn@gmail.com',
+    tagline:
+      'React JS core team at @facebook; formerly at @treasure-data and @google.',
+  },
+  gaearon: {
+    id: 'gaearon',
+    name: 'Dan Abramov',
+    image: '/img/gaearon.jpeg',
+    location: 'London, UK',
+    email: 'dan.abramov@me.com',
+    tagline:
+      'Working on @reactjs. Co-author of Redux and Create React App. Building tools for humans.',
+  },
+  flarnie: {
+    id: 'flarnie',
+    name: 'Flarnie Marchan',
+    image: '/img/flarnie.jpeg',
+    location: 'Oakland, CA',
+    email: null,
+    tagline:
+      'Software Engineer at Facebook React Core Team & Co-maintainer of Draft.js',
+  },
+  sebmarkbage: {
+    id: 'sebmarkbage',
+    name: 'Sebastian Markbåge',
+    image: '/img/sebmarkbage.jpeg',
+    location: 'San Francisco',
+    email: 'sebastian@calyptus.eu',
+    tagline: null,
+  },
+  sophiebits: {
+    id: 'sophiebits',
+    name: 'Sophie Alpert',
+    image: '/img/sophiebits.jpeg',
+    location: 'California',
+    email: 'hi@sophiebits.com',
+    tagline:
+      'I like fixing things. eng manager of @reactjs at Facebook. ex-@khanacademy. 💎🌸 she/her. kindness, intersectional feminism, music.',
+  },
+  trueadm: {
+    id: 'trueadm',
+    name: 'Dominic Gannaway',
+    image: '/img/trueadm.jpeg',
+    location: 'London, United Kingdom',
+    email: null,
+    tagline:
+      'Currently an engineer on the React core team at @facebook. Author of @infernojs and t7. Enjoys coding + being a Dad.',
+  },
+};
+export const userRepositoriesListJSON = {
+  acdlite: [
+    {
+      name: 'recompose',
+      url: 'https://github.com/acdlite/recompose',
+      description:
+        'A React utility belt for function components and higher-order components.',
+    },
+    {
+      name: 'react-fiber-architecture',
+      url: 'https://github.com/acdlite/react-fiber-architecture',
+      description: "A description of React's new core algorithm, React Fiber",
+    },
+    {
+      name: 'redux-router',
+      url: 'https://github.com/acdlite/redux-router',
+      description:
+        'Redux bindings for React Router – keep your router state inside your Redux store',
+    },
+    {
+      name: 'flummox',
+      url: 'https://github.com/acdlite/flummox',
+      description: 'Minimal, isomorphic Flux.',
+    },
+    {
+      name: 'redux-rx',
+      url: 'https://github.com/acdlite/redux-rx',
+      description: 'RxJS utilities for Redux.',
+    },
+    {
+      name: 'react-remarkable',
+      url: 'https://github.com/acdlite/react-remarkable',
+      description: 'A React component for rendering Markdown with remarkable',
+    },
+  ],
+  bvaughn: [
+    {
+      name: 'react-virtualized',
+      url: 'https://github.com/bvaughn/react-virtualized',
+      description:
+        'React components for efficiently rendering large lists and tabular data',
+    },
+    {
+      name: 'redux-search',
+      url: 'https://github.com/bvaughn/redux-search',
+      description: 'Redux bindings for client-side search',
+    },
+    {
+      name: 'react-window',
+      url: 'https://github.com/bvaughn/react-window',
+      description:
+        'React components for efficiently rendering large lists and tabular data',
+    },
+    {
+      name: 'react-virtualized-select',
+      url: 'https://github.com/bvaughn/react-virtualized-select',
+      description:
+        'HOC that uses react-virtualized and react-select to display large lists of options in a drop-down',
+    },
+    {
+      name: 'js-search',
+      url: 'https://github.com/bvaughn/js-search',
+      description:
+        'JS Search is an efficient, client-side search library for JavaScript and JSON objects',
+    },
+    {
+      name: 'react-highlight-words',
+      url: 'https://github.com/bvaughn/react-highlight-words',
+      description:
+        'React component to highlight words within a larger body of text',
+    },
+  ],
+  gaearon: [
+    {
+      name: 'facebook/react',
+      url: 'https://github.com/facebook/react',
+      description:
+        'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
+    },
+    {
+      name: 'reduxjs/redux',
+      url: 'https://github.com/reduxjs/redux',
+      description: 'Predictable state container for JavaScript apps',
+    },
+    {
+      name: 'facebook/create-react-app',
+      url: 'https://github.com/facebook/create-react-app',
+      description: 'Create React apps with no build configuration.',
+    },
+    {
+      name: 'reduxjs/redux-devtools',
+      url: 'https://github.com/reduxjs/redux-devtools',
+      description:
+        'DevTools for Redux with hot reloading, action replay, and customizable UI',
+    },
+    {
+      name: 'react-dnd/react-dnd',
+      url: 'https://github.com/react-dnd/react-dnd',
+      description: 'Drag and Drop for React',
+    },
+    {
+      name: 'paularmstrong/normalizr',
+      url: 'https://github.com/paularmstrong/normalizr',
+      description: 'Normalizes nested JSON according to a schema',
+    },
+  ],
+  flarnie: [
+    {
+      name: 'diffux/diffux',
+      url: 'https://github.com/diffux/diffux',
+      description: 'Perceptual diffs of responsive screenshots made simple.',
+    },
+    {
+      name: 'facebook/draft-js',
+      url: 'https://github.com/facebook/draft-js',
+      description: 'A React framework for building text editors.',
+    },
+    {
+      name: 'facebook/react',
+      url: 'https://github.com/facebook/react',
+      description:
+        'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
+    },
+    {
+      name: 'facebook/jest',
+      url: 'https://github.com/facebook/jest',
+      description: '🃏 Delightful JavaScript Testing.',
+    },
+    {
+      name: 'Galooshi/import-js',
+      url: 'https://github.com/Galooshi/import-js',
+      description: 'A tool to simplify importing JS modules',
+    },
+    {
+      name: 'webpack_rails_demo',
+      url: 'https://github.com/flarnie/webpack_rails_demo',
+      description: 'Setting up webpack with Ruby on Rails: a basic demo',
+    },
+  ],
+  sebmarkbage: [
+    {
+      name: 'art',
+      url: 'https://github.com/sebmarkbage/art',
+      description:
+        "Retained mode vector drawing API designed for multiple output modes. There's also a built-in SVG parser.",
+    },
+    {
+      name: 'ecmascript-immutable-data-structures',
+      url:
+        'https://github.com/sebmarkbage/ecmascript-immutable-data-structures',
+      description: null,
+    },
+    {
+      name: 'ocamlrun-wasm',
+      url: 'https://github.com/sebmarkbage/ocamlrun-wasm',
+      description: 'OCamlrun WebAssembly - OCaml Bytecode Interpreter in WASM',
+    },
+    {
+      name: 'ecmascript-generator-expression',
+      url: 'https://github.com/sebmarkbage/ecmascript-generator-expression',
+      description:
+        'Proposal for do Generator Expressions in ECMAScript. Work in progress. Edit Add topics',
+    },
+    {
+      name: 'ecmascript-undefined-propagation',
+      url: 'https://github.com/sebmarkbage/ecmascript-undefined-propagation',
+      description:
+        'ECMAScript proposal to relax the rules to return `undefined` for property access on `null` or `undefined` instead of throwing.',
+    },
+    {
+      name: 'ecmascript-shallow-equal',
+      url: 'https://github.com/sebmarkbage/ecmascript-shallow-equal',
+      description: 'A proposal for ECMAScript for Object.shallowEqual',
+    },
+  ],
+  sophiebits: [
+    {
+      name: 'facebook/react',
+      url: 'https://github.com/facebook/react',
+      description:
+        'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
+    },
+    {
+      name: 'Khan/KaTeX',
+      url: 'https://github.com/Khan/KaTeX',
+      description: 'Fast math typesetting for the web.',
+    },
+    {
+      name: 'facebook/react-devtools',
+      url: 'https://github.com/facebook/react-devtools',
+      description:
+        'An extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools.',
+    },
+    {
+      name: 'vim-awesome/vim-awesome',
+      url: 'https://github.com/vim-awesome/vim-awesome',
+      description: 'Awesome Vim plugins from across the universe',
+    },
+    {
+      name: 'facebook/draft-js',
+      url: 'https://github.com/facebook/draft-js',
+      description: 'A React framework for building text editors.',
+    },
+    {
+      name: 'es3ify',
+      url: 'https://github.com/sophiebits/es3ify',
+      description:
+        'Browserify transform to convert ES5 syntax to be ES3-compatible.',
+    },
+  ],
+  trueadm: [
+    {
+      name: 'facebook/react',
+      url: 'https://github.com/facebook/react',
+      description:
+        'A declarative, efficient, and flexible JavaScript library for building user interfaces.',
+    },
+    {
+      name: 'infernojs/inferno',
+      url: 'https://github.com/infernojs/inferno',
+      description:
+        'An extremely fast, React-like JavaScript library for building modern user interfaces',
+    },
+    {
+      name: 'facebook/prepack',
+      url: 'https://github.com/facebook/prepack',
+      description: 'A JavaScript bundle optimizer.',
+    },
+    {
+      name: 't7',
+      url: 'https://github.com/trueadm/t7',
+      description: 'Lightweight virtual DOM templating library',
+    },
+    {
+      name: 'infernojs/babel-plugin-inferno',
+      url: 'https://github.com/infernojs/babel-plugin-inferno',
+      description: null,
+    },
+  ],
+};

fixtures/unstable-async/suspense/src/api/index.js

@@ -0,0 +1,67 @@
+import {
+  coreContributorListJSON,
+  userProfileJSON,
+  userRepositoriesListJSON,
+} from './data';
+
+export function fetchCoreContributorListJSON() {
+  return makeFakeAPICall('/react/contributors', coreContributorListJSON);
+}
+
+export function fetchUserProfileJSON(id) {
+  return makeFakeAPICall(`/${id}/details`, userProfileJSON[id]);
+}
+
+export function fetchUserRepositoriesListJSON(id) {
+  return makeFakeAPICall(`/${id}/repositories`, userRepositoriesListJSON[id]);
+}
+
+let fakeRequestTime = 1000;
+let onProgress = () => true;
+
+export function setFakeRequestTime(val) {
+  fakeRequestTime = val;
+}
+
+export function setProgressHandler(handler) {
+  onProgress = handler;
+}
+
+export function setPauseNewRequests(value) {
+  shouldPauseNewRequests = value;
+}
+
+let shouldPauseNewRequests = false;
+let notifiers = {};
+let isPausedUrl = {};
+
+export function setPaused(url, isPaused) {
+  const wasPaused = isPausedUrl[url];
+  isPausedUrl[url] = isPaused;
+  if (isPaused !== wasPaused) {
+    notifiers[url]();
+  }
+}
+
+function makeFakeAPICall(url, result) {
+  let i = 1;
+  return new Promise(resolve => {
+    isPausedUrl[url] = shouldPauseNewRequests;
+    function notify() {
+      if (!isPausedUrl[url]) {
+        i++;
+      }
+      onProgress(url, i, isPausedUrl[url]);
+      if (isPausedUrl[url]) {
+        return;
+      }
+      if (i === 100) {
+        resolve(result);
+      } else {
+        setTimeout(notify, fakeRequestTime / 100);
+      }
+    }
+    notifiers[url] = notify;
+    notify();
+  });
+}

fixtures/unstable-async/suspense/src/cache.js

@@ -0,0 +1,7 @@
+import {createCache} from 'simple-cache-provider';
+
+export let cache;
+function initCache() {
+  cache = createCache(initCache);
+}
+initCache();

fixtures/unstable-async/suspense/src/components/App.js

@@ -0,0 +1,93 @@
+import React, {Placeholder, PureComponent} from 'react';
+import {unstable_scheduleWork} from 'schedule';
+import {unstable_trace as trace, unstable_wrap as wrap} from 'schedule/tracing';
+import {createResource} from 'simple-cache-provider';
+import {cache} from '../cache';
+import Spinner from './Spinner';
+import ContributorListPage from './ContributorListPage';
+
+const UserPageResource = createResource(() => import('./UserPage'));
+
+function UserPageLoader(props) {
+  const UserPage = UserPageResource.read(cache).default;
+  return <UserPage {...props} />;
+}
+
+export default class App extends PureComponent {
+  state = {
+    currentId: null,
+    showDetail: false,
+  };
+
+  componentDidUpdate(prevProps, prevState) {
+    if (
+      prevState.showDetail !== this.state.showDetail ||
+      (prevState.currentId !== this.state.currentId && this.state.showDetail)
+    ) {
+      window.scrollTo(0, 0);
+    }
+  }
+
+  handleUserClick = id => {
+    trace(`View ${id}`, performance.now(), () => {
+      trace(`View ${id} (high-pri)`, performance.now(), () =>
+        this.setState({
+          currentId: id,
+        })
+      );
+      unstable_scheduleWork(
+        wrap(() =>
+          trace(`View ${id} (low-pri)`, performance.now(), () =>
+            this.setState({
+              showDetail: true,
+            })
+          )
+        )
+      );
+    });
+  };
+
+  handleBackClick = () =>
+    trace('View list', performance.now(), () =>
+      this.setState({
+        currentId: null,
+        showDetail: false,
+      })
+    );
+
+  render() {
+    const {currentId, showDetail} = this.state;
+    return showDetail
+      ? this.renderDetail(currentId)
+      : this.renderList(currentId);
+  }
+
+  renderDetail(id) {
+    return (
+      <div>
+        <button
+          onClick={this.handleBackClick}
+          style={{
+            display: 'block',
+            marginBottom: '1rem',
+          }}>
+          Return to list
+        </button>
+        <Placeholder delayMs={2000} fallback={<Spinner size="large" />}>
+          <UserPageLoader id={id} />
+        </Placeholder>
+      </div>
+    );
+  }
+
+  renderList(loadingId) {
+    return (
+      <Placeholder delayMs={1500} fallback={<Spinner size="large" />}>
+        <ContributorListPage
+          loadingId={loadingId}
+          onUserClick={this.handleUserClick}
+        />
+      </Placeholder>
+    );
+  }
+}

fixtures/unstable-async/suspense/src/components/ContributorListPage.js

@@ -0,0 +1,62 @@
+import React, {Fragment} from 'react';
+import {createResource} from 'simple-cache-provider';
+import {cache} from '../cache';
+import Spinner from './Spinner';
+import {fetchCoreContributorListJSON} from '../api';
+
+const ContributorListResource = createResource(fetchCoreContributorListJSON);
+
+const ContributorListPage = ({loadingId, onUserClick}) => (
+  <Fragment>
+    <h1>React Core Team</h1>
+    <ul
+      style={{
+        display: 'grid',
+        gridGap: '0.5rem',
+        gridTemplateColumns: 'repeat(auto-fill, 20rem)',
+        padding: 0,
+        margin: 0,
+      }}>
+      {ContributorListResource.read(cache).map(user => (
+        <ContributorListItem
+          key={user.id}
+          onClick={() => onUserClick(user.id)}
+          isLoading={loadingId && user.id === loadingId}
+          user={user}
+        />
+      ))}
+    </ul>
+  </Fragment>
+);
+
+const ContributorListItem = ({isLoading, onClick, user}) => (
+  <li
+    onClick={onClick}
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      padding: '1rem',
+      backgroundColor: 'var(--color-buttonBg)',
+      border: '1px solid var(--color-buttonBorder)',
+      borderRadius: '1rem',
+      opacity: isLoading === false ? 0.5 : 1,
+      cursor: isLoading ? 'default' : 'pointer',
+    }}
+    tabIndex="0">
+    <div>
+      <strong>{user.name}</strong>
+      <div style={{marginTop: '0.5rem'}}>{user.id}</div>
+    </div>
+    {isLoading ? (
+      <Spinner size="small" />
+    ) : (
+      <svg width="24" height="24" viewBox="0 0 24 24">
+        <path fill="none" d="M0 0h24v24H0z" />
+        <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" />
+      </svg>
+    )}
+  </li>
+);
+
+export default ContributorListPage;

fixtures/unstable-async/suspense/src/components/Spinner.css

@@ -0,0 +1,75 @@
+.Spinner {
+  animation: rotate 1.3s linear infinite;
+}
+
+.SpinnerContainer-large {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@keyframes rotate {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(270deg); }
+}
+
+.SmallSpinnerPath {
+  stroke-dasharray: 100;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    SmallDash 1.3s ease-in-out infinite;
+}
+
+@keyframes SmallDash {
+ 0% { stroke-dashoffset: 100; }
+ 50% {
+   stroke-dashoffset: 50;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: 100;
+   transform:rotate(450deg);
+ }
+}
+
+.MediumSpinnerPath {
+  stroke-dasharray: 150;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    MediumDash 1.3s ease-in-out infinite;
+}
+
+@keyframes MediumDash {
+ 0% { stroke-dashoffset: 150; }
+ 50% {
+   stroke-dashoffset: 50;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: 150;
+   transform:rotate(450deg);
+ }
+}
+
+.LargeSpinnerPath {
+  stroke-dasharray: 200;
+  stroke-dashoffset: 0;
+  transform-origin: center;
+  animation:
+    LargeDash 1.3s ease-in-out infinite;
+}
+
+@keyframes LargeDash {
+ 0% { stroke-dashoffset: 200; }
+ 50% {
+   stroke-dashoffset: 50;
+   transform:rotate(135deg);
+ }
+ 100% {
+   stroke-dashoffset: 200;
+   transform:rotate(450deg);
+ }
+}

fixtures/unstable-async/suspense/src/components/Spinner.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import './Spinner.css';
+
+const SPINNER_SIZES = {
+  small: 30,
+  medium: 50,
+  large: 70,
+};
+
+const STROKE_WIDTHS = {
+  small: 4,
+  medium: 5,
+  large: 6,
+};
+
+const PATH_CLASS_NAMES = {
+  small: 'SmallSpinnerPath',
+  medium: 'MediumSpinnerPath',
+  large: 'LargeSpinnerPath',
+};
+
+// Heavily inspired by https://codepen.io/mrrocks/pen/EiplA
+export default function Spinner({size = 'small'}) {
+  const baseSize = SPINNER_SIZES[size];
+  const pathSize = baseSize / 2;
+  const strokeWidth = STROKE_WIDTHS[size];
+  const pathRadius = `${baseSize / 2 - strokeWidth}px`;
+  const className = PATH_CLASS_NAMES[size];
+  const containerClassName = `SpinnerContainer SpinnerContainer-${size}`;
+
+  return (
+    <div className={containerClassName}>
+      <svg
+        className={className}
+        width={baseSize}
+        height={baseSize}
+        viewBox={`0 0 ${baseSize} ${baseSize}`}>
+        <circle
+          className="SpinnerPath"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth={strokeWidth}
+          strokeLinecap="round"
+          cx={pathSize}
+          cy={pathSize}
+          r={pathRadius}
+        />
+      </svg>
+    </div>
+  );
+}

fixtures/unstable-async/suspense/src/components/UserPage.js

@@ -0,0 +1,169 @@
+import React, {Placeholder} from 'react';
+import {createResource} from 'simple-cache-provider';
+import Spinner from './Spinner';
+import {cache} from '../cache';
+import {fetchUserProfileJSON, fetchUserRepositoriesListJSON} from '../api';
+
+export default function UserPage({id}) {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, 20rem)',
+        gridGap: '1rem',
+        alignItems: 'start',
+      }}>
+      <UserDetails id={id} />
+      <Placeholder delayMs={1000} fallback={<Spinner size="medium" />}>
+        <Repositories id={id} />
+      </Placeholder>
+    </div>
+  );
+}
+
+const UserDetailsResource = createResource(fetchUserProfileJSON);
+
+function UserDetails({id}) {
+  const user = UserDetailsResource.read(cache, id);
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gridGap: '0.5rem',
+        width: '20rem',
+        padding: '1rem',
+        backgroundColor: 'var(--color-buttonBg)',
+        border: '1px solid var(--color-buttonBorder)',
+        borderRadius: '1rem',
+      }}>
+      <UserPicture source={user.image} />
+      <div
+        style={{
+          fontSize: '1.5rem',
+          fontWeight: 'bold',
+          color: 'var(--color-pageTextDark)',
+        }}>
+        {user.name}
+      </div>
+      <div style={{fontSize: '1.25rem'}}>{user.id}</div>
+      {user.tagline !== null && <div>{user.tagline}</div>}
+      <hr
+        style={{
+          width: '100%',
+          height: '1px',
+          border: 'none',
+          backgroundColor: '#ddd',
+        }}
+      />
+      {user.location && <Location location={user.location} />}
+      {user.email && <Email email={user.email} />}
+    </div>
+  );
+}
+
+const Location = ({location}) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+    }}>
+    <svg
+      viewBox="0 0 24 24"
+      style={{
+        width: '24px',
+        height: '24px',
+        marginRight: '0.5rem',
+        fill: 'currentColor',
+      }}>
+      <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
+      <path d="M0 0h24v24H0z" fill="none" />
+    </svg>
+    {location}
+  </div>
+);
+
+const Email = ({email}) => (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+    }}>
+    <svg
+      viewBox="0 0 24 24"
+      style={{
+        width: '24px',
+        height: '24px',
+        marginRight: '0.5rem',
+        fill: 'currentColor',
+      }}>
+      <path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z" />
+      <path d="M0 0h24v24H0z" fill="none" />
+    </svg>
+    <a href={`mailto:${email}`}>{email}</a>
+  </div>
+);
+
+const ImageResource = createResource(
+  src =>
+    new Promise(resolve => {
+      const img = new Image();
+      img.onload = () => resolve(src);
+      img.src = src;
+    })
+);
+
+function Img({src, alt, ...rest}) {
+  return <img src={ImageResource.read(cache, src)} alt={alt} {...rest} />;
+}
+
+function UserPicture({source}) {
+  return (
+    <Placeholder delayMs={1500} fallback={<img src={source} alt="poster" />}>
+      <Img
+        src={source}
+        alt="profile picture"
+        style={{
+          width: '100%',
+          height: 'auto',
+          borderRadius: '0.5rem',
+        }}
+      />
+    </Placeholder>
+  );
+}
+
+const UserRepositoriesResource = createResource(fetchUserRepositoriesListJSON);
+
+function Repositories({id}) {
+  const repos = UserRepositoriesResource.read(cache, id);
+  return (
+    <ul
+      style={{
+        display: 'grid',
+        gridGap: '1rem',
+        padding: 0,
+        margin: 0,
+      }}>
+      {repos.map(repo => <Repository key={repo.name} {...repo} />)}
+    </ul>
+  );
+}
+
+function Repository({description, name, url}) {
+  return (
+    <li
+      style={{
+        display: 'grid',
+        gridGap: '0.5rem',
+        padding: '1rem',
+        backgroundColor: 'var(--color-buttonBg)',
+        border: '1px solid var(--color-buttonBorder)',
+        borderRadius: '1rem',
+      }}>
+      <strong>
+        <a href={url}>{name}</a>
+      </strong>
+      <div>{description}</div>
+    </li>
+  );
+}

fixtures/unstable-async/suspense/src/index.css

@@ -0,0 +1,90 @@
+* { box-sizing: border-box; }
+
+:root {
+  --color-debuggerBg: #f7f7f7;
+  --color-debuggerText: #333;
+  --color-debuggerBorder: #e7e7e7;
+
+  --color-panelBg: #f7f7f7;
+  --color-panelText: #333;
+
+  --color-pageTextDark: #000;
+  --color-pageText: #333;
+  --color-pageBg: #fff;
+
+  --color-buttonBg: #f7f7f7;
+  --color-buttonBorder: #e7e7e7;
+
+  --pt: 8px;
+}
+
+body {
+  margin: 0;
+  padding: calc(var(--pt)*4);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  color: var(--color-pageText);
+  background-color: var(--color-pageBg);
+}
+
+/* -------------------------------- */
+/* Debugger */
+/* -------------------------------- */
+
+#debugger {
+  position: absolute;
+  top: 0; left: 0; right: 0; bottom: 0;
+  /* width: 100vw; */
+  /* height: 100vh; */
+  pointer-events: none;
+}
+
+.🎛 {
+  position: fixed;
+  max-width: calc(var(--pt)*28);
+  border-radius: var(--pt);
+  padding: calc(var(--pt)*2);
+  background-color: var(--color-debuggerBg);
+  border: 1px solid var(--color-debuggerBorder);
+  border-radius: 0.5rem;
+  color: var(--color-debuggerText);
+  pointer-events: all;
+}
+
+.🕹 {
+  background-color: var(--color-buttonBg);
+  border: 1px solid var(--color-buttonBorder);
+  border-radius: var(--pt);
+  padding: 0;
+  width: calc(var(--pt)*5);
+  height: calc(var(--pt)*5);
+  font-size: calc(var(--pt)*3);
+  line-height: 1;
+  font-weight: bold;
+  cursor: pointer;
+  user-select: none;
+}
+
+.🕹.👶 {
+  width: calc(var(--pt)*3);
+  height: calc(var(--pt)*3);
+  font-size: calc(var(--pt)*2);
+}
+
+.🕹.🐘 {
+  width: auto;
+  height: calc(var(--pt)*7);
+  padding: var(--pt) calc(var(--pt)*2);
+}
+
+.🕹:hover {
+  background-color: white;
+  top: -4px;
+  left: -4px;
+  box-shadow: 4px 4px 0 var(--color-buttonBorder);
+}
+
+.🕹:active {
+  box-shadow: none;
+  top: 0;
+  left: 0;
+}

fixtures/unstable-async/suspense/src/index.js

@@ -0,0 +1,275 @@
+import React, {Fragment, PureComponent} from 'react';
+import {unstable_createRoot, render} from 'react-dom';
+import {unstable_trace as trace} from 'schedule/tracing';
+import {cache} from './cache';
+import {
+  setFakeRequestTime,
+  setPaused,
+  setPauseNewRequests,
+  setProgressHandler,
+} from './api';
+import App from './components/App';
+import Draggable from 'react-draggable';
+import './index.css';
+
+let handleReset;
+
+class Shell extends PureComponent {
+  state = {
+    iteration: 0,
+  };
+
+  componentDidMount() {
+    handleReset = this.handleReset;
+  }
+
+  handleReset = () =>
+    this.setState(prevState => ({
+      iteration: prevState.iteration + 1,
+    }));
+
+  render() {
+    return <App key={this.state.iteration} />;
+  }
+}
+
+class Debugger extends PureComponent {
+  state = {
+    iteration: 0,
+    strategy: 'async',
+    requestTime: 1,
+    showDebugger: false,
+    pauseNewRequests: false,
+    waitTime: 0,
+    requests: {},
+  };
+
+  componentDidMount() {
+    setFakeRequestTime(this.state.requestTime * 1000);
+    setProgressHandler(this.handleProgress);
+    window.addEventListener('keydown', e => {
+      if (e.key.toLowerCase() === '/') {
+        this.setState(state => ({
+          showDebugger: !state.showDebugger,
+        }));
+      } else if (e.key.toLowerCase() === 'p') {
+        this.togglePauseRequests();
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.requestTime !== this.state.requestTime) {
+      setFakeRequestTime(this.state.requestTime * 1000);
+    }
+  }
+
+  handleReset = () => {
+    trace('Clear cache', () => {
+      cache.invalidate();
+      this.setState(state => ({
+        requests: {},
+      }));
+      handleReset();
+    });
+  };
+
+  handleProgress = (url, progress, isPaused) => {
+    this.setState(state => ({
+      requests: {
+        ...state.requests,
+        [url]: {
+          url,
+          progress,
+          isPaused,
+        },
+      },
+    }));
+  };
+
+  togglePauseRequests = () => {
+    this.setState(
+      prevState => {
+        return {pauseNewRequests: !prevState.pauseNewRequests};
+      },
+      () => {
+        setPauseNewRequests(this.state.pauseNewRequests);
+      }
+    );
+  };
+
+  render() {
+    if (!this.state.showDebugger) {
+      return null;
+    }
+    return (
+      <Draggable cancel="input">
+        <div
+          className="🎛"
+          style={{
+            bottom: 20,
+            right: 20,
+          }}>
+          <div>
+            Latency: {this.state.requestTime} second{this.state.requestTime !==
+            1
+              ? 's'
+              : ''}{' '}
+            <input
+              type="range"
+              min="0"
+              max="3"
+              step="0.5"
+              style={{width: '100%'}}
+              value={this.state.requestTime}
+              onChange={e => {
+                e.stopPropagation();
+                this.setState({requestTime: parseFloat(e.target.value)});
+              }}
+            />
+          </div>
+          <label>
+            <input
+              type="checkbox"
+              checked={this.state.pauseNewRequests}
+              onChange={this.togglePauseRequests}
+            />
+            Pause new requests
+          </label>
+          <br />
+          <br />
+          {Object.values(this.state.requests).filter(x => x.progress !== 100)
+            .length > 0 ? (
+            <Fragment>
+              <div style={{marginBottom: 10}}>
+                <b>Loading</b>
+              </div>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <div style={{marginBottom: 10}}>
+                <b>Loading</b>
+              </div>
+              <small style={{height: 20, display: 'block'}}>(None)</small>
+            </Fragment>
+          )}
+          {Object.keys(this.state.requests)
+            .reverse()
+            .map(url => {
+              const {progress, isPaused} = this.state.requests[url];
+              if (progress === 100) {
+                return null;
+              }
+              return (
+                <div
+                  key={url}
+                  style={{
+                    height: 20,
+                    width: '100%',
+                    position: 'relative',
+                    cursor: 'pointer',
+                    title: isPaused ? 'Resume' : 'Pause',
+                  }}
+                  onClick={e => {
+                    setPaused(url, !isPaused);
+                  }}>
+                  <div
+                    style={{
+                      height: '100%',
+                      width: progress + '%',
+                      position: 'absolute',
+                      left: 0,
+                      top: 0,
+                      backgroundColor: isPaused ? '#fbfb0e' : '#61dafb',
+                      zIndex: -1,
+                      opacity: 0.8,
+                    }}
+                  />
+                  <div
+                    style={{
+                      fontFamily: 'monospace',
+                      fontWeight: 'bold',
+                      color: 'black',
+                    }}>
+                    {url}
+                  </div>
+                </div>
+              );
+            })}
+          {Object.values(this.state.requests).filter(x => x.progress === 100)
+            .length > 0 ? (
+            <Fragment>
+              <br />
+              <div style={{marginBottom: 10}}>
+                <b>Cached</b>{' '}
+                <button
+                  style={{
+                    height: 16,
+                    outline: 'none',
+                    border: 'none',
+                    background: 'none',
+                    cursor: 'pointer',
+                  }}
+                  onClick={this.handleReset}>
+                  🗑
+                </button>
+              </div>
+            </Fragment>
+          ) : (
+            <Fragment>
+              <br />
+              <div style={{marginBottom: 10}}>
+                <b>Cached</b>
+              </div>
+              <small style={{height: 20, display: 'block'}}>(None)</small>
+            </Fragment>
+          )}
+          {Object.keys(this.state.requests)
+            .reverse()
+            .map(url => {
+              const {progress} = this.state.requests[url];
+              if (progress !== 100) {
+                return null;
+              }
+
+              return (
+                <div
+                  key={url}
+                  style={{
+                    height: 20,
+                    width: '100%',
+                    position: 'relative',
+                  }}>
+                  <div
+                    style={{
+                      height: '100%',
+                      width: progress + '%',
+                      position: 'absolute',
+                      left: 0,
+                      top: 0,
+                      backgroundColor:
+                        progress !== 100 ? '#61dafb' : 'lightgreen',
+                      zIndex: -1,
+                      opacity: 0.8,
+                    }}
+                  />
+                  <div
+                    style={{
+                      fontFamily: 'monospace',
+                      fontWeight: 'bold',
+                      color: 'black',
+                    }}>
+                    {url}
+                  </div>
+                </div>
+              );
+            })}
+        </div>
+      </Draggable>
+    );
+  }
+}
+
+unstable_createRoot(document.getElementById('root')).render(<Shell />);
+
+render(<Debugger />, document.getElementById('debugger'));

fixtures/unstable-async/time-slicing/.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*